CODEWITHSUNDEEP
htmlcss
Ted
Ted

Reputation: 3875

How can I divide the screen to these divs in css?

Just how can I make my page look like this: enter image description here

When the left, and right (the upper divs

When A and B's height is unknown (well, the one who has most content will decide on how down below C is)

Thanks in advance

Upvotes: 2

Views: 19317

Answers (6)

user9344571
user9344571

Reputation: 11

You can make it inline with following example for right alignment:

<div style="width:30%;float:right"><!--write your required tags--></div>

Here width and float varies depending on the requirement

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hi you can make this simply as like this

Css

#left { 
    width:100px;
    min-height: 300px;
    background:red;
    float:left;
}
#right {
    min-height:200px;
    background:blue;
    float:left;
    width:400px;
}

#bottom{
    height:200px;
    background:green;
    clear:both;
}
​

HTML

<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>​

Live demo link here http://jsfiddle.net/rohitazad/AHk78/2/

Upvotes: 0

mshsayem
mshsayem

Reputation: 18008

CSS:

#divA
{
   float:left;
   width: <width of div A>;
}
#divB
{
   float:left;
   width: <width of div B>;
}

#divC
{
   clear:both;
}

HTML:

<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>

Upvotes: 1

OACDesigns
OACDesigns

Reputation: 2299

I would make the sections percentages, that way you get these proportions no matter what screen size the user has.

CSS

#sectionA
{
   float:left;
   width: 20%;
}
#sectionB
{
   float:left;
   width: 80%;
}

#sectionB
{
   clear:both;
   width: 100%;
}

HTML

<div id="sectionA"></div>
<div id="sectionB"></div>
<div id="sectionC"></div>

Upvotes: 4

mowgli
mowgli

Reputation: 2869

Something like this:

A float: left

B float: left;

C clear: both;

Upvotes: 0

Andreas Wong
Andreas Wong

Reputation: 60516

http://jsfiddle.net/AHk78/

HTML

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

CSS

#upleft { width:100px; height: 500px; background:red; float:left; }
#upright { width:300px; height:200px; background:blue; float:left }
#below { height:300px; width:100%; background:green; clear:both }

Upvotes: 3

Related Questions