I have a div container with a width 1000px, and within it three divs width 33.333333%, all float:left.
There's maybe one or two pixels' width that isn't covered by this 99.999999% where the 100%-width container div shows through (see picture- red pixels on right side).
How can I fix this, preferably without making it four divs for an even 25% each?
You Can Get an Exact and Flexible Solution
If you only float and set the width on the first two elements, and then set either overflow: hidden or overflow: auto (just not visible) on the third element, then the magic works to automatically fill the remaining space, so that there will never be a gap.
See this fiddle example, where I've overridden the values for the :last-child div to make this happen.
This works:
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 1000px;
padding: 10px;
background: #5cabc1;
overflow: hidden;
}
div.box {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
width: 33.3%;
float: left;
}
div.b1 {
background: #fca502;
}
div.b2 {
background: #ffff00;
}
div.b3 {
background: #afcfe4;
}
</style>
</head>
<body>
<div class="container">
<div class="box b1">div 1</div>
<div class="box b2">div 3</div>
<div class="box b3">div 3</div>
</div>
</body>
</html>
http://jsfiddle.net/sVu4R/5/
You need box-sizing property:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Try this:
display: inline-block;
margin: 0;
padding: 0;
Percentage widths in CSS are each calculated independently. As such, you're ending up with three 333px divs, and one pixel left over.
If the parent element has a fixed width, just set the three columns to the appropriate sizes (333px, 334px, 333px) to fill the container. No need for percentages!
Related
http://optimalpages.de/DrupalMusi/
How can I position the main content div in the middle without it collapsing to the left, when left sidebar is shorter than the content? Is that possible? I don't want to use a fixed height for the navigation, but can I somehow say "sidebarleft height = content height", or is there an easier way?
Thanks!
Actually you are floating only elements to the left without any wrapper element, so what happens is this..
Instead, wrap the other 2 elements inside a wrapper element and than float it to the left
.left_wrap {
float: left;
width: 30%;
}
.right_wrap {
float: left;
width: 70%;
}
.right_wrap > div {
border: 3px solid #ff0;
height: 100px;
}
<div class="main">
<div class="left_wrap">
Hello
</div>
<div class="right_wrap">
World
<div></div>
<div></div>
</div>
</div>
Demo
Better Demo
If you want even a better one, I would suggest you to wrap the boxes inside the parent containers, and instead of floating the child elements, float the parent.
Demo
Also, don't forget to clear your floated elements, just make sure you clear them, you can use a self clearing parent CSS like
.clear:after {
content: "";
clear: both;
display: table;
}
And call the above class on the element containing floated elements as their children, where in this case, it's <div class="main"> so it should be now
<div class="main clear">
<!-- Floated Elements -->
</div>
I'm not quite sure if this is what you mean but try:
#node-29{
float: right;
clear: left;
margin-left: 0;
}
This will position the div's next to each other and keep the main content to the right.
This can be quite complex depending on your existing theme.
I wrote this page a while back to shows you how you can do that.
http://linux.m2osw.com/3columns
More or less you need a first div that encompasses the left column and the content. That div is the one that gets centered.
To make it simpler you can set a specific width to the div and you get something like this:
div.page
{
width: 900px;
margin: 0 auto;
}
That will center the main div.
For the column and the content, both are float: left; div's. In order to "close" the lot, you want another div just before closing the main div. That one has a style that ensures that the main div has the correct size: clear: both;.
we can use margins to set the div position .we can either specify fixed margins or we can give percentage value ,so that it will based on the total size of the screen.
<!DOCTYPE html>
<html>
<head>
<style>
#main
{
background-color:yellow;
}
#main
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body >
<div id="main">
this is how we can display main div in centre
</div>
</body>
</html>
I have a problem which I do not understand.
If I use percentage in width, I would expect that elements calculate borders, margins or paddings within their size (in percentage).
But in fact those values are added to their size which I asume is wrong.
Is my expectation wrong?
The bellow example shows the issue. The both "divs" "left" and "right" I expect to be in a single line. If I remove "border" it works as expected.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
}
.left {
border: 1px solid black;
width: 20%;
float: left;
}
.right {
border: 1px solid black;
width: 80%;
float: left;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
What you can do to fix this issue is to use box-sizing. See http://jsfiddle.net/Marwelln/YYkxK/
box-sizing:border-box
That's totally normal. It's not what you might expect at first, but CSS works that way.
Even without percentages:
#width {
width: 100px;
padding: 0 20px;
}
This #width div will occupy 140px. Works the same for percentages.
So you might need inner divs to achieve what you want.
<div class="left">
<div class="inner">
</div>
</div>
<div class="right">
<div class="inner">
</div>
</div>
.inner { padding: 10px; }
.right .inner { border-left: 1px solid #ccc; }
Padding or Border always adds to an elements size, inside out.
Margin never adds to size but adds space outside the element.
Percentages or set values don't matter. The above is always true.
Reviewing the box model may help ---> HERE
When you use percentage as width (or height) values, these are the percentage of the width (or height) of the parent block element (containing block).
In super modern browsers you can use calc() to fix this: calc(80% - 2px). And yes, it is normal. If you set the width to 100px and border to 150px what would happen then if border wasnt added?
Quite simple question but tried about everything.
what i want is 2 (actually 5) divs next to eachother with the class "container" so i can make a horizontal 1page website. Each div has to be 100% wide. so 2 divs mean 2 screens next to eachother.
This is the css line i have now:
.container { width: 100%; float: left; display: inline; }
I cant get them to line up next to each other.
Here is a visual to make it more clear.
image url for bigger preview: http://www.luukratief.com/stackoverflow.png
The scrolling part is not the issue for me, just the placement of the divs.
Is this possible using percentages or is this simply not possible.
If so, please tell me how to do this with css.
Thanks in advance!
You can make a container with 200% width and then put two divs inside of that element with 50% width so you will make sure that one div always gets the whole visitors screen width.
For example:
<div class="container">
<div class="contentContainer"></div>
<div class="contentContainer"></div>
</div>
And CSS:
.container {
width: 200%;
}
.contentContainer {
width: 50%;
float: left;
}
How does this look to you?
http://jsfiddle.net/2wrzn/19/
Note that the border isn't required. I was using it for testing. Turning it on also makes one of the divs wrap around, so it's turned off.
you should use display: inline-block; instead of float anf then wrap all five divs in another container or use the body element and add white-space: nowrap to it.
If the design is incredibly pixel perfect, you can remove the actual "word-spacing" between the inline-blocks by removing the whitespace in the HTML or by giving them a negative right margin of about 0.25em; but if scrolling to new "page" you dn't notice it anyway..
Example Fiddle
HTML Code:
<div class="container" id="p1">Page 1 => Next page</div>
<div class="container" id="p2">Page 2 => Next page</div>
<div class="container" id="p3">Page 3 => Next page</div>
<div class="container" id="p4">Page 4 => Next page</div>
<div class="container" id="p5">Page 5 => Next page</div>
CSS:
html, body {margin: 0; padding: 0; height: 100%;}
body {white-space: nowrap;}
.container {
display: inline-block;
width: 100%;
height: 100%;
}
.container {
display: inline !ie7; /* for working inline-blocks in IE7 and below */
}
.container * {white-space: normal;}
#p1 {background: #fcf;}
#p2 {background: #ff0;}
#p3 {background: #cfc;}
#p4 {background: #abc;}
#p5 {background: #cba;}
If you want them next to each other then they can't be 100%. width: 100% will force the div to take up the full width of it's containing element, in this case the full width of the window I guess.
If you want two screens next to each other you'd need to set the width of each to 50%. If I've misunderstood you're question add a bit more detail.
You could try something like this, but you may have compatibility problems with IE and table* (but you can consider http://code.google.com/p/ie7-js/ to fix that)
<!DOCTYPE html>
<html>
<head>
<style>
html { width: 500%; display: table; }
body { width: 100%; display: table-row; overflow-x: scroll}
.container { width: 20%; display: table-cell; }
</style>
<body>
<div class="container">Test1</div>
<div class="container">Test2</div>
<div class="container">Test3</div>
<div class="container">Test4</div>
<div class="container">Test5</div>
The % width of the divs is a percentage of the width of the tags they are contained in and ultimately the body tag (i.e. not the window). So the body tag must be 100 * n where n is the number of div tags you want side-by-side. The example below has 2 div tags thus the body is 200% (2 * 100). Each the div tag's; width is a percentage of the body tag's width roughly 100 / n (need a smidgen less). Don't forget to factor in margin and padding. Here's an example:
<html>
<head>
<style type="text/css">
body{
width:200%;
margin:0%;
padding:0%;
}
#dvScreen1, #dvScreen2{
width:49.95%;
height:80%;
clear:none;
}
#dvScreen1 {
float:left;
border:solid black 1px
}
#dvScreen2{
float:right;
border:solid blue 1px
}
</style>
</head>
<body>
<div id="dvScreen1">
<p>Screen 1 stuff ...</p>
</div>
<div id="dvScreen2">
<p>Screen 2 stuff ...</p>
</div>
</body>
</html>
I am trying to design a page using CSS and I need to display three boxes in the same line.
I used three div's and have added float:left to the first, margin-left:8cm; to the center and float:right to the right.
The left and center box are perfectly displayed but the right one goes to the next line. I even tried adding margin-left:16cm; , it still goes down by a line.
Can someone help?
Simply use float:left; on all three elements, and they will line up next to each other.
float:right floats the block element right of the next block element, not the previous one.
If you want to preserve the order of the <div> elements in your DOM, you should set both the first and the second as float:left and set the left margin of the third one to accomodate for the space taken by the first two.
Alternatively, you can put the <div> elements in first, third, second order and keep your current styles.
An alternative that does not mess with your markup, and does not require a margin that depends on the other divs' width is to float the first two divs left, and float the last right. So long as the added widths of the divs fits within the parent element it should display as three columns.
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
#one, #two, #three { width: 33.3%; }
#one, #two { float: left; }
#three { float: right; clear: none; }
The clear:none in the third div makes this work in IE 6 & 7.
<html>
<head>
<style>
.outer{
padding-top: 4%;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.box{
display: inline-block;
padding: 5%;
background-color: black;
}
</style>
</head>
<body>
<div class="outer">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
.whateveritiscalled {
display: inline-block;
}
just simply
I have some HTML+CSS code that wants to layout several divs. The layout is like this: all divs stay in a parent div whose size is fixed. Then each child div should stay on its own line, and use the minimum height for drawing its content. The last div should consume all remaining height, so that the parent div is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last div to use the height of the parent minus the sum of height of the other divs.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.