Menu
Community /Pin to ProfileBookmark
@cootheadOct 02.2016 — #Hi there lioshi,
[indent]
This forum is not working to well, again. :eek:
[/indent]
[i]coothead[/i]@cootheadOct 02.2016 — #Hi there lioshi,
[indent]
[b]Second Attempt[/b]
Here are two examples...
[b]display: table[/b]
[b]display: flex[/b]
[/indent]
[i]coothead[/i]
3 equal columns in dimensions, but not on display
Hi,
I’m trying to create 3 columns with 3 divs, and their CSS code is:
.col1,.col2,.col3
{
float: left;
margin-left: 3%;
}
.col1 { width: 30%; }
.col2 { width: 30%; }
.col3 { width: 30%; }
But they do not spread equally on the screen: the right-most column has much more space to its right than the other, what am I doing wrong?
Sign in
to post a comment6 Comments(s) ↴
0
@cootheadOct 02.2016 — #Hi there lioshi,[indent]
This forum is not working to well, again. :eek:
[/indent]
[i]coothead[/i]
0
@cootheadOct 02.2016 — #Hi there lioshi,[indent]
[b]Second Attempt[/b]
Here are two examples...
[b]display: table[/b]
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/150% arial,verdana,helvetica,sans-serif;
color: #666;
}
h1,h2 {
text-align: center;
}
#container {
display: table;
border-spacing: 0.5em;
border: 0.06em solid #999;
background-color: #fcfcfc;
box-shadow: 0.5em 0.5em 0.5em #999;
}
#container div {
display: table-cell;
width: 33.33%;
padding: 1em;
border: 0.06em solid #999;
box-sizing: border-box;
background-color: #fff;
box-shadow: inset 0 0 1em #999;
}
#container div div {
width: auto;
padding: 0;
border: 0;
box-sizing: border-box;
box-shadow: none;
}
@media screen and (max-width: 40em) {
#container {
display: block;
padding: 0;
}
#container div {
display: block;
width: auto;
margin: 0.5em; <br/>
}
}
</style>
</head>
<body>
<h1>Page Information</h1>
<div id="container">
<div>
<h2>Column One Information</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc.
</p>
<div>a div element</div>
</div>
<div>
<h2>Column Two Information</h2>
<div>a div element</div>
</div>
<div>
<h2>Column Three Information</h2>
<div>a div element</div>
</div>
<!-- #container --></div>
</body>
</html>[/color][b]display: flex[/b]
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/150% arial,verdana,helvetica,sans-serif;
color: #666;
}
h1,h2 {
text-align: center;
}
#container {
display: flex;
justify-content: space-between;
padding: 1%;
border: 0.06em solid #999;
background-color: #fcfcfc;
box-shadow: 0.5em 0.5em 0.5em #999;
}
#container div {
width: 32.33%;
padding: 1em;
border: 0.06em solid #999;
box-sizing: border-box;
background-color: #fff;
box-shadow: inset 0 0 1em #999;
}
#container div div {
width: auto;
padding: 0;
border: 0;
box-sizing: border-box;
box-shadow: none;
}
@media screen and (max-width: 40em) {
#container {
display: block;
padding: 0;
}
#container div {
width: auto;
margin: 0.5em; <br/>
}
}
</style>
</head>
<body>
<h1>Page Information</h1>
<div id="container">
<div>
<h2>Column One Information</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc.
</p>
<div>a div element</div>
</div>
<div>
<h2>Column Two Information</h2>
<div>a div element</div>
</div>
<div>
<h2>Column Three Information</h2>
<div>a div element</div>
</div>
<!-- #container --></div>
</body>
</html>[/color][/indent]
[i]coothead[/i]