Is there a way to cause a div to “float:center;”. I’m trying to get one sidebar on the left and one on the right but it just ends up merging. with the center.
Example: http://opensciencefund.org/support/
float:center; is not a valid option. Objects can be floated to the left or right, but not in the middle. Just looking at that page, I’m not sure what you wanted to happen … can you give us a bit more description?
There is no such thing. You have to give the div in question a width, then define it’s margin as: x auto x auto, with x being how much you want the top & bottom margins respectfully. You can use shorthand if you want top & bottom be the same value
div{
margin: 0 auto;
width:30%;
}
this gives the top and bottom a value of 0 and left/right a value of auto.
Right, Im aware there is no such thing thus the " &". What I’d like is the left sidebar to float left then 10px to the right of that the main content then 10px to the right of that be the right sidebar.
/*Basic Structure
------------------------------------------------------------
*/
#wrapper {
width: 1300px;
margin: 0 auto;
text-align: left;
}
#content {
float: left;
width: 650px;
margin:0px 10px
padding-bottom: 10px;
}
#sidebar {
float: right;
width: 290px;padding-bottom: 10px;
}
#sidebar2 {
float: left;
width: 200px;
padding-bottom: 10px;
}
#footer {
clear: both;
}
From your link, if you want to have the sidebar floated left and the content floated to the right of it, then this is one option.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#wrapper {
border: 1px solid red;
overflow: hidden
}
#sidebar {
width: 25%;
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px
}
#content {
width: 70%;
float: right;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<h2>Sidebar</h2>
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis
</div>
<div id="content">
<h2>Content</h2>
Vitae quis risus enim. Suspendisse a nulla a, vestibulum eros suspendisse. Magna wisi a ad molestie dolor. Quam vel mollis nulla
pharetra. Qui congue inceptos ut vehicula, feugiat ultricies in pellentesque eu, eros aliquid vel nec dis, risus quis feugiat
vestibulum praesent at. Ut nam aenean eu, etiam nonummy etiam tortor, arcu augue urna proident donec mattis praesent, vel commodo
nulla habitasse sapien ullamcorper condimentum. Ipsum nunc leo dictum magna molestie enim, lacus est, ante habitasse scelerisque
dolor leo sodales erat, tristique dapibus nulla vehicula elementum mauris velit, felis a est. Eget sit erat eget arcu donec,
montes varius. Volutpat nisl ligula in. Suspendisse nullam dictum suspendisse, ante quam tortor at sed eu. Condimentum pulvinar
</div>
</div>
</body>
</html>
Except Im trying to add 2 sidebars, one to the left and one to the right of the content. Thank you though.
two ways:
easy way
html:
left sidebar
right sidebar
content
footer
css:
#leftsidebar {
float: left;
width: whatever;
margin-right: 10px;
}
#rightsidebar {
float: right;
width: whatever;
margin-left: 10px;
}
Content {
you don’t actually have to do anything here;
}
#footer {
clear: both;
}
yay
harder way
content-first (for all those rabid SEO drugusers)
html:
wrapper
content
/wrapper
left sidebar
right sidebar
footer
css:
#wrapper {
float: left;
width: 100%;
}
Content {
margin: 0 widthofsidebars + 10pxMargins;
}
#leftsidebar {
float: left;
width: whatever;
margin-left: -100%;
}
#rightsidebar {
float: left;
width: whatever;
margin-left: -mywidth;
}
#footer {
clear this crazy stuff;
}
okay done, except won’t work well in IE6 unless the page is fixed width… I just give IE6 a fixed width page because I’m lazy and IE6 sucks
The googles:
css “holy grail”
“css floats”
“css three column layout”
kthx
*edit so basically your only problem was that you were also floating Content which means it didn’t go fluid in the middle like you wanted but worse it could “see” the floats and you’d rather it had no idea they were there so leave it static and it’ll be cool
like sharks shooting laser beams out of their eyes
it’s funny how things collide in this forum!
there is another thread about the almost same thing.
and there is a third way: stacked divs and the use of display: inline-block for some of them 
You can add as many floated divs as you like for each column/sidebar you want in your page layout.
I showed only 2 columns/sidebars for demo purposes.
Thanks Stomme Poes, I went with the harder way and it almost worked.
Except now the right sidebar is behaving oddly. the below left margin of -250px puts it here but changing it to a lesser value like -240px doesn’t cause it to move until -200px which knocks it below the content on the left. I am befuddled.
#wrapper {
width: 980px;
margin: 0 auto;
text-align:left;
}
#contentwrapper {
float:left;
width:100%
}
#sidebar2 {
float:left;
width:200px;
margin-left:-118%;
}
#sidebar {
float:left;
width:250px;
margin-left: -250px;
}
Content {
width:650px;
margin:0px 0px 0px 90px;
}
Your page setup has your wrapper rather small, which is why you’ve got more than 100% for the left bar. When I look at your wrapper it doesn’t look wide enough to fit everyone inside… you have 980px and content is 650px and that leaves you 330px left to fit two sidebars. So your math is weird and browsers mostly do ok with -100% but once you go more or less they start giving you vast differences cross browser (well this might be because in my case the wrapper is always a flexible width and yours is fixed so browsers might all be ending up at the same numbers here).
To make this work your content box will need margins on both sides that are equal to the widths of your sidebars.
wrapperr {
width: 980px;
}
#contentwrapper {
float: left;
width: 100%; <– or px width… this could be “980px” too
}
Content {
width: 510px; /980-200-250=530px; -20px for 10px sidemargins
margin: 0 260px 0 210px; / your sidebars plus 10px*/
}
#sidebar2 {
*edit position: relative too;
float:left;
width:200px;
margin-left:-100%; <– this means 100% of the float above it, contentwrapper
}
#sidebar {
*edit position: relative too
float:left;
width:250px;
margin-left: -250px;<– sometimes I need to make this a hair larger than the actual width, like -260px
}
Also, another thing I forgot: Safari and Chrome? someone else did not like me being able to click links inside these sidebars without adding “position: relative” to them. Not sure why, they should be “higher” than contentwrapper because they are later in source, but Safari insisted.
Now if you’re saying to yourself, 510px is NOT wide enough for Content… well remember you’d have that width anyway if you had the sidebars first and floated. You always have to add up the totals of all the boxes, their padding, their borders AND their margins and it has to not go over the total width of their parent container.
It turns out there was an extra “div=content” that was mucking things up.
Off Topic: Fritzing IS Awesome.