I have 2 div in one main div.both have to be horizontally aligned : one on the left and one on the right. I use float left for the first and float right to the second.It looks fine in IE and Firefox. Is it enough or should I use also margins ?

Somebody could enlighten me about may'be a general rule or better do advice ?TXXX^_^

here is the ex.(menu-wrapper and logo-wrapper are both inside the header-wrapper.)

#header-wrapper {

width : 1200px;

height : 120px;

border: solid 1px;

border-color: #0033FF;

}

#logo-wrapper{

width:300px;

height:80px;

float: left;

margin-top:20px;

 

}

#menu-wrapper{

width:880px;

height:80px;

float: right;

margin-top: 20px;

}

Floating your two content divisions like you've done is fine...

 

As for giving extra margins that's really down to how you want to present the content, eg how much white space you give. Don't forget you can also add padding

Floating your two content divisions like you've done is fine...

 

As for giving extra margins that's really down to how you want to present the content, eg how much white space you give. Don't forget you can also add padding

Also, if you float left/ right, and then add margin left/ right, IE6 will have a hissy fit. Using padding for this will make life easier

tx to both of you.

So, In matter of space btween elements , Is it safer to add then margin + padding to be sure that I cover all main browsers ?

What about the clear option that I read about here and there ? does it have something to do with that or is it totally something else ?

Sorry for very basic question but I am at the bottom of the CSS mountain

if you want to add space between 2 floated divs, I recommend using padding and not margin, as this should appear consistent across browsers.

Hope that helps.

You need to change in div tag with x , y co-ordinate and need to align left to make the code universal.

add the follwing syntax.

 

 

"<div {cordinate} {style align= left}>"

You need to change in div tag with x , y co-ordinate and need to align left to make the code universal.

add the follwing syntax.

 

 

"<div {cordinate} {style align= left}>"

 

so I shall use style align instead of float ?

You need to change in div tag with x , y co-ordinate and need to align left to make the code universal.

add the follwing syntax.

 

 

"<div {cordinate} {style align= left}>"

 

so I shall use style align instead of float ?

It depends on what doctype you are using.... I pesonally would advise against using code such as recommended above. If you learn how to code to the xhtml strict standard, your document will be much more likely to stand the test of time, and be more reliable to render well across all browsers. All styling should be done in an external css file, not as part of your html tags. It really is worth doing this, as your code will be much easier to revisit, troubleshoot or update, and so will your styling.

It depends on what doctype you are using.... I pesonally would advise against using code such as recommended above. If you learn how to code to the xhtml strict standard, your document will be much more likely to stand the test of time, and be more reliable to render well across all browsers. All styling should be done in an external css file, not as part of your html tags. It really is worth doing this, as your code will be much easier to revisit, troubleshoot or update, and so will your styling.

I use XHTML Transitionnal...

So to sum up sticking with our previous posts (float, margin etc) is the best , right ?

ignore what George1 has said as you shouldn't use inline styles as he has shown you to do, for a start and you don't give coordinates if you are floating you only need to tell it to float.

 

 

 

 

With margins and paddings you need to be careful as IE6 has a bug that can causes double margins on the same side you are floating (eg float left a margin on the left could become bigger). If you are just floating two boxes, one on the left and one on the right the safest way to make a bit of space between them would be just to reduce the size of the boxes. So rather then them fitting your full container you wouldn't....for example container size 900px, have the left at 500px and the right at 350px which will give you a space in the middle of 50px.

 

Another safe tip for IE6 is this. If you are wanting there to be a space on the left and right so that they are not pushed right up to the sides of the container then instead of padding the left and right boxes, just pad the container a little bit.

 

 

I hope that all makes sense.

ignore what George1 has said as you shouldn't use inline styles as he has shown you to do, for a start and you don't give coordinates if you are floating you only need to tell it to float.

 

 

 

 

With margins and paddings you need to be careful as IE6 has a bug that can causes double margins on the same side you are floating (eg float left a margin on the left could become bigger). If you are just floating two boxes, one on the left and one on the right the safest way to make a bit of space between them would be just to reduce the size of the boxes. So rather then them fitting your full container you wouldn't....for example container size 900px, have the left at 500px and the right at 350px which will give you a space in the middle of 50px.

 

Another safe tip for IE6 is this. If you are wanting there to be a space on the left and right so that they are not pushed right up to the sides of the container then instead of padding the left and right boxes, just pad the container a little bit.

 

 

I hope that all makes sense.

 

Thanks, yes it makes also more sense. I understand now.

Cheers !