I want to create a layout using div tags, to the design described below.

 

• A div tag named "header" at the top, with a width of 1000px and an auto height
• A div tag named "menu" directly below the "header" div, with a width of 1000px and an auto height
• A div tag named "you are here" directly below the "menu" div, with a width of 1000px and an auto height
• A div tag named "text" directly below the "menu" div, with a width of 800px and an auto height
• A div tag named "images" to the right of the "text" div, with a width of 200px and an auto height
• A div tag named "footer" directly below the "text" and "images" divs, with a width of 1000px and an auto height

 

The part I'm having diffculty with is how to make each div tag display below the previous one (and how to make the ""images" div tag display to the right of the "text" div tag. Sorry if it's unclear how I have worded it, I did create a picture of the layout I wanted, but the forum wouldn't let me upload it, so this was really the only way I could do it.

 

Thank you for any help.

The part I'm having diffculty with is how to make each div tag display below the previous one (and how to make the ""images" div tag display to the right of the "text" div tag.

 

All you should need to do in order to have everything stack up nicely is place all of your divs into one main div (in this case I'll call it "wrapper"). As for positioning the images and text divs, you simply float each accordingly to where you want them to be. See the code below:

 

<style>

#wrapper { margin 0px; padding: 0px; }
#header { width: 1000px; height: auto; }
#menu { width: 1000px; height: auto; }
#you-are-here { width: 1000px; height: auto; }
#text { float: left; width: 800px; height: auto; }
#images { float: right; width: 200px; height: auto; }
#footer { width: 1000px; height: auto; }

</style>

<div id="wrapper">

<div id="header"></div> 

<div id="menu"></div> 
<div id="you-are-here"></div>

<div id="text"></div>
<div id="images"></div>

<div id="footer"></div> 

</div> <!-- End Wrapper -->

 

 

Hope that answers your question. Feel free to let me know if it doesn't make sense.

All you should need to do in order to have everything stack up nicely is place all of your divs into one main div (in this case I'll call it "wrapper"). As for positioning the images and text divs, you simply float each accordingly to where you want them to be. See the code below:

 

<style>

#wrapper { margin 0px; padding: 0px; }
#header { width: 1000px; height: auto; }
#menu { width: 1000px; height: auto; }
#you-are-here { width: 1000px; height: auto; }
#text { float: left; width: 800px; height: auto; }
#images { float: right; width: 200px; height: auto; }
#footer { width: 1000px; height: auto; }

</style>

<div id="wrapper">

<div id="header"></div> 

<div id="menu"></div> 
<div id="you-are-here"></div>

<div id="text"></div>
<div id="images"></div>

<div id="footer"></div> 

</div> <!-- End Wrapper -->

 

 

Hope that answers your question. Feel free to let me know if it doesn't make sense.

 

rhfmedia's code should work a treat, but I suggest you set a width on #wrapper, also reduce width of #text to give space between #text and #images

 

#wrapper { width:1000px; margin: 0px auto; padding: 0px; }

 

Also, need to add this between images and footer divs:

 

 

<div style="clear:both"></div>

Hope this helps too, here's a little mobile responsive mockup:

<style>

body {margin:0;padding:0}

#wrapper { width: 1000px;margin: 0px auto; padding: 0px; color:#FFFFFF;background-color:#003366 }

#header { width: 100%; height: 100px; background-color:#993300; margin:0}

#menu { width: 100%; height: 100px; background-color:#99FF00; margin:0}

#you-are-here { width: 100%; height: 100px; background-color:#FF3333; margin:0}

#text { float: left; width: 77.5%; height: 100px; background-color:#9933CC; }

#images { float: right; width: 20%; height: 100px; background-color:#666600 }

#footer { width: 100%; height: 100px; background-color:#000000;margin:0}

@media only screen and (max-width: 767px) {

#wrapper,#text, #images {width:100%}

}

</style>

<div id="wrapper">

<div id="header">header</div>

<div id="menu">menu</div>

<div id="you-are-here">you are here</div>

<div id="text">text</div>

<div id="images">image</div>

<div style="clear:both"></div>

<div id="footer">footer</div>

</div>

<snip>

 

All great points Pam! Really like the idea to include that mobile responsive mockup. That clear both is definitely important as well. Be sure to put her code to good use!

Thank you for your help everyone, that worked out fine. There's just one more thing (it's my fault for not mentioning it before), could someone tell me what code I need to add to the "#wrapper" div tag to centre it please?

 

Thank you for your help.

<snip>

 

It should already be centered if you use Pam's code. As long as you set your wrapper to margin: 0px auto; you should be good to go.

It should already be centered if you use Pam's code. As long as you set your wrapper to margin: 0px auto; you should be good to go.

Thank you for your help, that worked. I just had to add "auto" to the margin.

No problem, glad I could help! Feel free to let me know if you have any other questions. Good luck!