Reputation: 1051

divide the page in three parts using div tag

I am trying to get the below layout for more than 1.5 hours but still can't get the right solution.

well if there are any duplicates then forgivve me for asking this question.

I want to have a layout like below diagram using div tag:

|_________________________________________________________________________________ | | | | | | | | | | | | | |__________________________________________________________ | | | | | | | | | | | | | | | | | | | | | | | | |__________________________________________________________________________________

I know how to do it using table tag.

Upvotes: 4

Answers (3)

Arda

Reputation: 6916

float:left is your friend

HTML:

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</div>

The CSS:

div {
    display: block;
}
#wrapper {
    width: 400px;
    height:400px;
}

#first {
    float:left;
    width: 33%;
    height: 100%;
    background: red;
}

#second {
    float:left;
    width: 67%;
    height: 30%;
    background: green;
}

#third {
    float:left;
    width: 67%;
    height: 70%;
    background: blue;
}

Example: http://jsfiddle.net/Vkmq3/1/

Upvotes: 7

Naveen Kumar Alone

Reputation: 7668

Here is exact JSFiddle or JSBin

Make CSS as

#upleft { 
   width:100px; 
   height: 300px; 
   background:red; float:left; 
}

#upright { 
   width:300px; 
   height:200px; 
   background:blue; 
   float:left
}
#below { 
   height:300px; 
   width:400px; 
   background:green 
}

And in HTML

<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>

Upvotes: 5

CoursesWeb

Reputation: 4237

Try this css and html code:

CSS:

<style type="text/css">
#left {
  float:left;
  width:27%;
  height: 25em;
  margin:1px .2em 1px 1px;
  border: 2px solid green;
}
#content {
  margin:1px .2em 1px 28%;
}
#cnt1 {
  position;relative;
  margin:.3em 2px;
  height: 10em;
  border: 1px solid blue;
}
#cnt2 {
  position;relative;
  margin:.3em 2px;
  height: 100%;
}
</style>

HTML:

<div id="left">Left side</div>
<div id="content">
  <div id="cnt1">Up</div>
  <div id="cnt2">Down</div>
</div>
<br style="clear:both;" />

Upvotes: 0

divide the page in three parts using div tag

Answers (3)

Related Questions