homepage Welcome to WebmasterWorld Guest from 54.234.141.47
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Is it possible to center 2 floating divs?
12inch

10+ Year Member



 
Msg#: 948 posted 10:17 am on Apr 29, 2003 (gmt 0)

Is it possible to center 2 floating divs that are nesting within one container div? For example:

body {
text-align: center;
}

div#container {
margin: 0px auto;
}

div#one {
float: left;
}

div#two {
float: left;
}

<div id="container">
<div id="one">text</div>
<div id="one">text</div>
</div>

If a remove the float: left, then the container is centered. But if I add the floating divs, the container floats to the left.

I want to position 2 DIV's next to each other centered IN a container DIV which is also centered. How can this be done?

Anand

 

papabaer

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 948 posted 10:47 am on Apr 29, 2003 (gmt 0)

The only way to "see" how floats behave in contained situations is to experiment. You can read all about float behavior at the W3C CSS 2.1 [w3.org ] Do pay close attention to float behavior when it overlaps the borders of its container.

IE has a bug that will allow a float to increase the vertical dimension of a parent div that uses margin: auto;, so be careful when testing and do read the specs. Testing will help you to fully understand the behavior ramnifications however.

Also, try testing your code and varying the margin values. Experiment with percentages and em. See what behaviors result.

Best of luck!

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 948 posted 11:15 am on Apr 29, 2003 (gmt 0)

Yep, testing is everything!

Seriously, I rarely can remember some of even the better known bugs untill I come to test my code and 'play' with new ideas. You find out so much more with experimentation and you'll very soon begin to get a 'feel' for how it all works...

Nick

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 948 posted 11:30 am on Apr 29, 2003 (gmt 0)

And a good way to really see what's happening is to have a temporary border on the elements in question.

12inch

10+ Year Member



 
Msg#: 948 posted 12:33 pm on Apr 29, 2003 (gmt 0)

Yes, temporary borders are very handy. I use them all the time.

But, after testing a lot, I still haven't managed to center a floated DIV. I think it isn't possible. I have tried almost everything.

starsailor

10+ Year Member



 
Msg#: 948 posted 2:53 pm on Apr 29, 2003 (gmt 0)

Does this help?

div#left {
width: 50%;
float: left;
}

div#right {
width: 50%;
float: right;
}

div#one {
float: right;
}

div#two {
float: left;
}

<div id="container">
<div id="left"><div id="one">text</div></div>
<div id="right"><div id="two">text</div></div>
</div>

papabaer

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 948 posted 2:56 pm on Apr 29, 2003 (gmt 0)

Nick and Birdman are right. It is the 'feel' of CSS that is the desired goal of any serious user. When controlling margins, padding and position, CSS is ALL about relationships. Once you 'feel' the relationship in action, you will find yourself capable of exerting greater control.

CSS is not 'theory,' but a very powerful design tool with tremendous potential. And, the potential will only be realized if developers are willing to push beyond perceived limits.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved