I have a container layer with a width of 850px. Inside of that i have 4 layers displayed as inline-blocks floating left, each of which are 100px high and 200px wide.
How can i space them so the outside ones line up at the edges of the container div but are spaced evenly within?
css
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background-color: #09F;
}
html
<div id=content>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
It's not really going to work, because you have a container that's 850px wide and you're trying to spread 4 200px wide containers with three gutters between them. 4*200 = 800 so you have 50px spread in which to split 3 gutters 50/3 is 16.6666ish which isn't going to work for pixels.
The following works, but I don't know how useful it is for you.
#content {
width: 848px;
margin-right: auto;
margin-left: auto;
background: #666;
overflow: hidden;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
#featured.first { margin-left: 0px;}
<div id=content>
<div id=featured class="first"></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
There are a couple of ways to do this. One cross-browser solution I have found is to use an extra wrapper div and get creative with it's true dimensions and negative margins.
<div id="content">
<div class="kludge">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>
</div>
I changed id=featured to a class name because ids should be unique if you want your HTML to be valid.
The CSS:
#content {
width: 850px;
margin: 0 auto; /* short-hand for margin, first value is top+bottom, second value is left+right */
overflow: hidden; /* not actually necessary but will make #container contain the floated items */
}
.kludge {
width: 900px; /* create room for the right hand margin of last item */
margin-right: -50px;
}
.featured {
display: block; /* inline-block not necessary for floated elements */
height: 100px;
width: 200px;
float: left;
margin: 0 10px;
background-color: #09F;
}
I think the easiest way is:
<style>
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
border:1px solid #000
}
#featured1 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 0px;
margin-top: 10px;
background-color: #09F;
}
#featured2 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
</style>
</head>
<body>
<div id=content>
<div id=featured1></div>
<div id=featured2></div>
<div id=featured2></div>
<div id=featured2></div>
</div>
Maybe not what you need, but If IE6 support is not important pseudo selectors are perfect for this, and avoid any HTML fudges (tested in IE7, FF3.5):
CSS:
#content {
width: 848px;
margin: 0 auto;
overflow: auto;
}
.featured {
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
.featured:first-child {
margin-left: 0;
}
HTML:
<div id="content">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>
Related
beginning from a layout to two column where column-left was fixed and column-right was liquid i have need to add a third column of widht fixed. I have this code:
<did id="#container">
<div id="#col1"> left fixed 15em </div>
<div id="#col2"> center liquid </div>
<div id="#col3"> right fixed 15em </div>
</div>
With this css:
#container {
background-color: #ffffff;
height: auto;
overflow: hidden;
}
#col1 {
float: left;
margin: 1em;
padding: 0.5em;
width: 15em;
}
#col2 {
float: none;
width: auto;
overflow: hidden;
margin: 1em;
padding: 0.5em;
}
#col3 {
float: right;
margin: 1em;
padding: 0.5em;
width: 15em;
}
The result is that third column it is located below the second column to right. How i can fix this problem?
The final result should to be a layout to three column where left and right column are fixed and central column is liquid.
Thank very much.
I like to use CSS tables for these layouts:
Note that you shouldn't use # in the id attribute.
#container {
width: 100%;
display: table;
}
#container>div {
display: table-cell;
}
#col1 {
background: lightblue;
padding: 0.5em;
width: 15em;
}
#col2 {
background: lightyellow;
padding: 0.5em;
}
#col3 {
background: lightgreen;
padding: 0.5em;
width: 15em;
}
<div id="container">
<div id="col1"> left fixed 15em </div>
<div id="col2"> center liquid </div>
<div id="col3"> right fixed 15em </div>
</div>
This is what flex boxes were invented for:
#container {
display: flex;
}
#col2 {
flex: 1;
}
#col1,
#col3 {
flex: 0 0 15em;
}
<did id="container">
<div id="col1">left fixed 15em</div>
<div id="col2">center liquid</div>
<div id="col3">right fixed 15em</div>
</div>
Extra Info: This is a very old web layout problem (called the "Holy Grail" of Layouts), see this article for a complete description. Also, see Mozilla's Using Flexible Boxes.
Note: In id properties don't include the # (that's used when selecting by id)
First of all, your html is invalid :
did should be div
id="..." should not contains #
HTML updated:
<div id="container">
<div id="col1"> left fixed 15em </div>
<div id="col2"> center liquid </div>
<div id="col3"> right fixed 15em </div>
</div>
For the CSS, you can change your rule #col2 float: none to float: left
JSFIDDLE: http://jsfiddle.net/ghorg12110/5p175fms/
You could try the following:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Three column layout</title>
<style>
body { margin: 0; overflow: hidden }
#V { position: absolute; top: 1em; left: 1em; width: 15em; border: 1px solid red; padding: .5em }
#W { position: absolute; top: 1em; right: 1em; bottom: 0; left: 1em; margin: 0 17em }
#X { border: 1px solid blue; padding: .5em }
#Y { position: absolute; top: 1em; right: 1em; width: 15em; border: 1px solid green; padding: .5em }
</style>
<div id=V>
Left content
</div>
<div id=W>
<div id=X>
Middle content
</div>
</div>
<div id=Y>
Right content
</div>
I require a fairly complex layout. I've been trying for a few hours to figure this out but still no luck. I require a fixed div next to 5 fluid DIVs.
All the fluid DIVs need to be different percentages, but all 6 DIVs combined (1 fixed + 5 fluid) must equal to the width of the parent DIV. The height of the parent div will be fixed.
Here's what I want: http://i.imgur.com/u0L6hrz.png
But here's what I have right now: http://jsfiddle.net/mnNzR/
I need to eliminate the whitespace so all the DIVs combined fill the whole box. I'd prefer not to use JS, if possible. Any help will be appreciated, thanks.
<div class="parent">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5"></div>
<div class="s6"></div>
</div>
You can achieve your layout with CSS by wrapping the fluid divs in a container with margin-left:150px;.
Then you must claculate so the sum of fluid divs width equals 100% :
FIDDLE
HTML :
<div class="parent">
<div class="s1"></div>
<div class="fluid_wrap">
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5"></div>
<div class="s6"></div>
</div>
</div>
CSS :
.parent {
display:block;
width: 100%;
height: 150px;
background-color: white;
box-shadow: 0 0 5px 5px rgba(215, 44, 44, 0.9);
}
.s1 {
width: 150px;
height: 100%;
display: block;
background-color: #00baff;
float: left;
}
.fluid_wrap {
margin-left:150px;
height:100%;
}
.s2 {
width: 17.5%;
height: 100%;
display: block;
background-color: #0090c5;
float: left;
}
.s3 {
width:12.5%;
height: 100%;
display: block;
background-color: #006b93;
float: left;
}
.s4 {
width: 21%;
height: 100%;
display: block;
background-color: #004660;
float: left;
}
.s5 {
width: 21%;
height: 100%;
display: block;
background-color: #002939;
float: left;
}
.s6 {
width: 28%;
height: 100%;
display: block;
background-color: #001720;
float: left;
}
I feel like this is such an idiotic question, and the little things in css always get me. Anyway, I have a design, and I'm trying to do 2 columns. One (which is a sidebar of 300px) which is at the right, and the other column should fill the remaining space.
As you can see the sidebar is put under the div on the left.
HTML:
<div class="wfix"><div class="col-fix">
<div class="col-lg">
<!--
<div id="block">
<bh>Homepage</bh>
<detail id="test">Loading...</detail>
</div>
-->
</div>
<div class="col-side">
</div>
</div></div>
CSS:
.wfix{ margin-left: 5em; margin-right: 5em; }
.col-fix {
display: table;
width: 100%;
table-layout: fixed;
}
.col-lg, .col-side {
color: #999;
margin: 0;
padding: 0;
}
.col-lg {
margin-left: 0;
margin-right: 300px;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: blue;
min-height: 500px;
}
.col-side {
width: 300px;
float: right;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: red;
min-height: 500px;
}
thanks for any help, Jake.
Floating elements should appear first in the html:
<div class="wfix">
<div class="col-fix">
<div class="col-side"></div>
<div class="col-lg"></div>
</div>
</div>
Demo
I would like to put a div on the bottom of a subcontent which is itself in a container,
sub-contents are dynamically generated.
Here is my html code
<div id="Content">
<div class="subcontent"></div>
<div class="subcontent"></div>
<div class="subcontent"></div>
<div class="pagenumber"></div>
</div>
My css code:
#content {
float: left;
margin: 0 auto;
min-height: 450px;
overflow: auto;
padding: 10px;
width: 978px;
}
.subcontent {
float: right;
height: 70px;
margin-bottom: 15px;
width: 700px;
}
DIV.pagenumber {
text-align: right;
???
}
try clear:both, this will clear any floats. http://jsfiddle.net/Kdt84/
DIV.pagenumber {
text-align: right;
clear:both;
}
What I want to do is have a <div> with a container class and a fixed width, holding a <div> with the block class to prevent other content encroaching on any uneven blank space, then two columns (<div>'s) side-by-side inside the block, and to be 50% of the width of the block.
When I create this, I get what appears to be a margin after the first block, which I do not want. I want the block to pack up tight, no margins.
I have an example here of what I have so far, and here if the code:
<html>
<head>
<title>Columns</title>
<style>
div {
margin: 0;
padding: 0;
}
.container {
background: #DDD;
width: 1200px;
margin: 0 auto;
padding: 2% 0;
}
.block {
background: #555;
width: 100%;
display: block;
}
.col {
width: 49%;
display: inline-block;
background: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
</div>
</div>
</body>
</html>
Your problem is being causes by inline-block, using this makes a space appear inbetween.
Try using float:left to get around this:
See on jsFiddle
.col {
width: 50%;
float: left;
box-sizing: border-box;
background: #333;
}
Note that I added, box-sizing:border-box; this means when you use padding it will be included in the width, not on top of it. Effectively enabling the use of it without an extra inner div.
Remember to include a clear fix afterwards also to "clear" the floats.
CSS
.clear {
clear:both;
}
HTML
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
<div class="clear"></div>
</div>
Try replacing these classes:
.block {
background: none repeat scroll 0 0 #555555;
display: block;
overflow: auto;
width: 100%;
}
.col {
width: 49%;
float: left;
background: #333;
}
.container {
background: #DDD;
width: 900px;
margin: 0 auto;
padding: 30px 30px 30px 30px;
}
.block {
background: #555;
width: 100%;
display: block;
}
.block:after {
content: "";
display: table;
clear: both;
}
.col {
width: 50%;
float: left;
background: #333;
}