Jump to content

Laying out DIVs


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...