javierdl Posted October 17, 2007 Share Posted October 17, 2007 Bare with me I'm so new to CSS. I am testing out CSS layout techniques with DIVs (instead of tables). And so far I have learned that the DIV margin property will define its position on the page, depending on how much margin it's given on each of its sides. What I can't figure out so far is how to put 2 (or more) DIVs side by side?To be more specific, the question is how to do it using this techniqueThe main problem I have encountered is that the margin of the 1st DIV keeps me from positioning the 2nd DIV next to it. But then again, keep in mind I'm just a CSS rookie, so...Thanks,JDL Link to comment Share on other sites More sharing options...
S@m Posted October 17, 2007 Share Posted October 17, 2007 You will need to put everything in a wrapper div. Then within that, you will have to "float" 2 divs. That will give you your columns.Give this a try: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body {margin:0;padding:0;background-color:#000;}#wrapper {margin:0 auto;background-color:#fff;width:700px;}#content {float:left;position:relative;width:60%;background-color:#99ff66;}#rightcolumn {float:left;position:relative;width:40%;background-color:#33ccff;}</style></head><body><div id="wrapper"> <div id="content"> <p>This is all of your content</p> </div> <div id="rightcolumn"> <p>This is the right column</p> </div></div></body></html> If nothing else, that should get you going in the right direction. Link to comment Share on other sites More sharing options...
javierdl Posted October 17, 2007 Author Share Posted October 17, 2007 Excellent! Thank you so much S@m :)I'll give it a try then.JDL Link to comment Share on other sites More sharing options...
javierdl Posted October 17, 2007 Author Share Posted October 17, 2007 One question about your code S@m:Could you please explain why you chose "float" ? Just trying to learn. #content {float:left;position:relative;width:60%;background-color:#99ff66;}This is what I've done so far, could you please have a look, I could really use a hand figuring out what's wrong with the right side box.J. Link to comment Share on other sites More sharing options...
javierdl Posted October 17, 2007 Author Share Posted October 17, 2007 Anyone else please feel free to answer too :)J Link to comment Share on other sites More sharing options...
jlhaslip Posted October 18, 2007 Share Posted October 18, 2007 The short version...Floats, padding and margins are the tools available for positioning elements according to the w3c 'Box Model'.There is a 'normal flow' to the rendering of your page. Top left to top right and then down the 'page', just as you would read a book.Subject to the element's width and height( including the padding and margins ), the elements try to fill the display, or 'viewport' in that order.Floated elements will fit tight to each other, if they have zero padding and zero margin. Adding margins and padding space them apart.Without floats or widths, many of the elements assume full width of the viewport ( Block Level elements ), so the page layout becomes top to bottom in order of the source code, so if you set a width to, say 50%, for several elements and float them, two can fit in a row together. Or 10, if they are sized to suit the layout.Lots to learn, especially on the 'taming' of Floats and getting control of element placement. We're here to help. Link to comment Share on other sites More sharing options...
javierdl Posted October 19, 2007 Author Share Posted October 19, 2007 Thanks a bunch jlhaslip That helps to better understand how this all works.I think it would help big time right now to see what the right code to make this page work looks like.Can you give me a hand with this please?J. This is what I've done so far, could you please have a look, I could really use a hand figuring out what's wrong with the right side box. Link to comment Share on other sites More sharing options...
jlhaslip Posted October 20, 2007 Share Posted October 20, 2007 I recognize this page. Haven't I replied to a thread on this already? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.