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
Related
I have a fixed-width left div, and I want to make the right div fill the remaining space.
So far I've been taking this approach recommended by another SO poster, but it doesn't work if I have content inside the right div.
The content in the right div is set to width: 100%, so I would expect it to be no wider than the right-hand div, but it overflows the right div.
<div>
<div id="left">left</div>
<div id="right">right<div id="insideright">overflows</div</div>
</div>
<style>
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
#insideright {
width: 100%;
background-color: blue;
height: 5px;
}
</style>
JSFiddle here, demoing the problem: http://jsfiddle.net/MHeqG/155/
What can I do?
I want to support older IE browsers, so I'd rather not use display: table-cell etc if I can avoid it, or at least not without a reasonable fallback.
Actually it's pretty simple... don't add 100% to the right div :)
just add the overflow property
LIVE DEMO
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
overflow:auto;
background-color:#00FF00;
}
#insideright {
background-color: blue;
}
...and if you even wondered how to make the red (left) div fill the remaining height...
DEMO
Not sure exactly what you're trying to do (your references to right are ambiguous). But if I'm understanding, you want the insideright to be nested within the right without overflowing?
Why not use a <span> instead? <div> out of the box is display: block; which will force a wrap like that. Alternatively, override this behavior by using display: inline; or display: inline-block;.
<div>
<div id="left">
left
</div>
<div id="right">
right
<span id="insideright">this should not overflow right</span>
</div>
</div>
http://jsfiddle.net/brandonscript/MHeqG/157/
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 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!
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>
My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?
<div style='width:30%; text-align:center; float:left; clear:both;'> Is what I have now.
You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.
You can use
.floatybox {
display: inline-block;
width: 123px;
}
If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.
Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up
My answer:
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
Why?
Technically, a Span is an inline element, however it can have width, you just need to set their display property to block first. However, in this context, a div is probably more appropriate, as I'm guessing you want to fill these divs with content.
One thing you definitely don't want to do is have clear:both set on the divs. Setting it like that will mean that the browser will not allow any elements to sit on the same line as them. The result, your elements will stack up.
Note, the use of display:inline. This deals with the ie6 margin-doubling bug. You could tackle this in other ways if necessary, for example conditional stylesheets.
I've added a wrapper (#whatever) as I'm guessing these won't be the only elements on page, so you'll almost certainly need to segregate them from the other page elements.
Anyway, I hope that's helpful.
you can do:
<div style="float: left;"></div>
or
<div style="display: inline;"></div>
Either one will cause the divs to tile horizontally.
I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note: This is not tested so it might need tweaking for older browsers.
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
I would use:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
It's the first time I use this 'code tool' from overflow... but shoul do it by now...
What you might like to do is look up CSS grid based layouts. This layout method involves specifying some CSS classes to align the page contents to a grid structure. It's more closely related to print-bsed layout than web-based, but it's a technique used on a lot of websites to layout the content into a structure without having to resort to tables.
Try this for starters from Smashing Magazine.
Look at the css Float property. http://w3schools.com/css/pr_class_float.asp
It works with block elements like div. Alternatively, what are you trying to display, tables aren't evil if you're really trying to show a table of some information.
I would try to give them all display: block; attribute and using float: left;.
You can then set width and/or height as you like. You can even specify some vertical-alignment rules.
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
another...
try to use float: left; or right;, change the width for other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)