Three column layout using CSS
Question
I am trying to do a 3-column layout and was wondering why the blue (right) column wraps around. This works fine in IE but fails to work in Chrome (30.0.1599.101m)
HTML
<body>
<div class="top">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
</body>
CSS
body
{
height:100%;
margin:0;
background:gray;
}
.top
{
width:225px;
height:200px;
background:black;
}
.left
{
width:75px;
height:200px;
background:Red;
float:left;
display:inline-block;
}
.center
{
width:75px;
height:200px;
background:green;
float:none;
display:inline-block;
}
.right
{
width:75px;
height:200px;
background:Blue;
float:right;
display:inline-block;
}
EDIT
I need the center element to have fluid height. Top should take whatever height center takes.
3 answers
solution1
2 ACCPTED 2013-11-08 05:51:47
Use float:left for .center and .right as well.
For fluid height, keep min-height:200px of .center . Try this:
.top{overflow:hidden;}
.left,.center,.right{float:left;}
.center{min-height:220px;}
solution2
1 2013-11-08 05:58:45
Html
<body>
<div class="top">
<div class="left">
</div><div class="center">
</div><div class="right">
</div>
</div>
</body>
CSS
body
{
height:100%;
margin:0;
padding:0;
background:gray;
}
.top
{
width:225px;
height:auto;
background:black;
}
.left
{
width:75px;
height:200px;
background:Red;
display:inline-block;
}
.center
{
width:75px;
height:570px;
background:green;
display:inline-block;
clear:both;
}
.right
{
width:75px;
height:200px;
background:Blue;
display:inline-block;
}
solution3
0 2013-11-08 06:03:19
Try this
This Layout is Fluid
CSS
body
{
height:100%;
margin:0;
background:gray;
}
.top
{
width:100%;
height:200px;
background:black;
}
.left
{
width:20%;
height:200px;
background:Red;
float:left;
display:inline-block;
}
.center
{
width:60%;
height:200px;
background:green;
float:left;
display:inline-block;
}
.right
{
width:20%
height:200px;
background:Blue;
float:right;
display:inline-block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Three Column CSS Layout
CSS three column layout fluidity
CSS: Three Column Layout problem
CSS3/HTML5 three column layout
“Holy Grail” three column layout using flexbox
CSS: Three-column layout with a semi-fluid center
Figuring out CSS for a three column layout with header [sketch included]
CSS: three-column layout with image and middle height
Using CSS to create two equal height layout columns, and inserting three equal height stacked columns inside the right column
three column layout, column spacing
Related Tags