CODEWITHSUNDEEP
htmlcss
KingNestor
KingNestor

Reputation: 67970

How can I layout some divs in the following arrangment?

I have a main container div in the center of my webpage. This is already in place and has various elements in it.

However, now I'm trying to place a large content div (Div #1) on the left that takes about 70% of the Main Container Div. What I'm having difficulty doing is getting the CSS right for having Div's #1, #2, #3, and #4 arranged like the following image:

alt text

What should I do in this case for CSS concerning Div #1 - #4? Should I float Div #1 left, and set it as a percentage/fixed width? And float divs #2 - 4 right?

Some guidance with this would be appreciated!

Upvotes: 3

Views: 134

Answers (2)

merkuro
merkuro

Reputation: 6177

Here is a working example, that might help you:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      *{
       margin:0;
       padding:0; 
      }
      .content{
        padding:10px;
        margin-top:50px;
        width:770px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid black;
      }
      .content h1{
        text-align:center; 
      }

      .content h2{
        text-align:center; 
      }

      .content .left{
        width:600px;
        float:left; 
        border:1px solid black;      
      }

      .content .right{
        width:150px;
        float:right;
      }

      .content .right div{        
        margin-bottom:10px; 

        border:1px solid black;
      }
      .content .clear{
        clear:both; 
      }
    </style>
  <body>
    <div class="content">
      <h1>Main Container Div</h1>
      <div class="left">
        <h2>Div #1</h2>
      </div>
      <div class="right"> 
        <div><p>Div #2</p></div>
        <div><p>Div #3</p></div>
        <div><p>Div #4</p></div>
        <div><p>Div #5</p></div>
      </div>
      <div class="clear">&nbsp;</div>
    </div>
    </body>
</html>

Upvotes: 3

marcgg
marcgg

Reputation: 66445

I'd say 2 wrappers div "left" and "right" floating left with correct sizes.

Put div 1 in left

Put div 2, 3 and 4 in right.

This should work, if not let me know

Upvotes: 5

Related Questions