• 0

[CSS] Div lay-out


Question

Hi

I've got the following image which should be cut-up into a div. Can anyone explain me how to do this? Apparently this is not so easy with the different sections and content. I've attached an image where I'm trying to show the different sections which should be included.

How can I tackle this issue? Anyone have an idea?

Thanks in advance!

post-44312-12818689473472.jpg

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0


#content { /* container*/   
 width: 900px; /* or whatever width you want? */
}

#leftcol {   
 float: left;    
width: 140px; /* width of left column */
}

#main {    
margin: 0 160px; /* must be #leftcol width (140px) + spacing/border so 20px spacing in this case */
}

#rightcol {    
float: right;    
width: 140px;
}


#nextrow {
width: 100%;
margin-left: 160px;
}

#smallertextrow {
width: 100%;
margin-left: 400px; /* or whatever width you want? */
}

.clear {clear:both;}

<div id="content">
<div id="leftcol"></div>
<div id="rightcol"></div>
<div id="main"></div>

<div class="clear"></div>

<div id="nextrow"></div>
<div id="smallertextrow"></div>
</div>

something along those lines

Link to comment
Share on other sites

  • 0

It is possible to do that with floats and margins but i suggest that if you want to do it yourself you should read up on the basics of css.

this site is a great resource, just click on css or use the search for more great articles like this one:

http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.