DJKAL Posted October 31, 2006 Share Posted October 31, 2006 hey,i am just wondering how do i align the div tags to the right?i can center it easily, but i need one on the right and another on the left.is it possible to have these so they will resize the space between the browser edge and the other tag automatically - including resizing the tag if neccasary?what i want to create, is 2 div tags.one on the left as a navigation menu and another on the right for my main text - this may soon change to 3 aswell, one on the left, one center and one on the right.but for now, can someone show me the code for creating well spaced and automatically resizing/moving div tags please.hope this makes sense - not sure how to word it properlythanks Link to comment Share on other sites More sharing options...
aspnetguy Posted October 31, 2006 Share Posted October 31, 2006 <div width="100%"> <div style="float:left;width:20%"></div> <div style="float:right;width:80%"></div> <br style="clear:both"/></div> Link to comment Share on other sites More sharing options...
DJKAL Posted October 31, 2006 Author Share Posted October 31, 2006 <div width="100%"> <div style="float:left;width:20%"></div> <div style="float:right;width:80%"></div> <br style="clear:both"/></div> thanks for that code!really appreciate it, can you just explain what the "<br style="clear:both"/>" is for please?just for future refereancethanks Link to comment Share on other sites More sharing options...
shiftJIS Posted November 1, 2006 Share Posted November 1, 2006 The clear property is described at the w3 here: http://w3schools.com/css/pr_class_clear.aspBasically it sets the br below all previous floated items. It doesn't really need to be there - the two div boxes would still sit where you intended them to go, but any content after those divs would act funny (they might be behind the floating divs) and the border of the containing div doesn't behave as you would expect (if I remember correctly it'll collapse)I personally use <div style="clear: both; height: 1px; margin-bottom: -1px;"> </div>. It makes a absolutely invisible clear as I'm a stickler for these sort of things. Link to comment Share on other sites More sharing options...
aspnetguy Posted November 1, 2006 Share Posted November 1, 2006 this article explains it best http://www.complexspiral.com/publications/containing-floats/Basically without the clear the floated divs will not be conatined within their container and can give weird behavior. Link to comment Share on other sites More sharing options...
DJKAL Posted November 1, 2006 Author Share Posted November 1, 2006 thanks for all of your help, wil luse the code soon as i am short on time at the moment.but it will deffinatly be used.thanks a lot for your help and information. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now