Welcome to WebmasterWorld Guest from 54.145.208.64

Forum Moderators: not2easy

Message Too Old, No Replies

Is it possible to center 2 floating divs?

   
10:17 am on Apr 29, 2003 (gmt 0)

10+ Year Member



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

10:47 am on Apr 29, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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!

11:15 am on Apr 29, 2003 (gmt 0)

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



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

11:30 am on Apr 29, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



And a good way to really see what's happening is to have a temporary border on the elements in question.
12:33 pm on Apr 29, 2003 (gmt 0)

10+ Year Member



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.

2:53 pm on Apr 29, 2003 (gmt 0)

10+ Year Member



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>

2:56 pm on Apr 29, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.