CODEWITHSUNDEEP
htmlcss
IFrizy
IFrizy

Reputation: 1745

Create thee divs in one line and 4th div in bottom. CSS/HTML

enter image description here

I want to create html page the next vision. Location of divs 1,2 and 3 in one line was done, but with 4th div I have some troubles and can't make it.

Upvotes: 0

Views: 101

Answers (2)

Carl0s1z
Carl0s1z

Reputation: 4723

You really should post your code to see whats wrong with it.. But i made the example for you.

Here you go, you could use float.

Html Code:

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

Css Code:

#wrapper{width:300px; margin:0;}
#first { height:300px; width:100px; background:black; float:left;}
#second{ height:250px; width:100px; background:red;float:left;}
#third{ height:250px; width:100px; background:green;float:left;}
#fourth{ height:50px; width:200px; background:blue;float:left;}

Working DEMO

Upvotes: 1

Alexander Mistakidis
Alexander Mistakidis

Reputation: 3130

Here's an example that uses non-fixed heights and widths. The key is wrapping the subsections in divs as well and styling accordingly. div is short for division after all.

<div class="left">
     1
</div>
<div class="right">
    <div class="second-third-wrapper">
        <div class="second">
            2 
        </div>
        <div class="third">
            3
        </div>
    </div>
    <div  class="fourth">
        4
    </div>
</div>

http://jsfiddle.net/Pb5NX/2/

The divs then use percentage height and widths to size them properly. These percentages take up a percentage of the parent element (the <body>, which then inherits from the <html>), so the parents height needs to be set as well.

body, html {
    width: 100%;
    height: 100%;
}
.left {
    background-color: blue;
    width: 50%;
    height: 100%;
    float: left;
}

If you want them a fixed size, you can just set a specific height and width style on the specific elements and the percentages will do the rest.

Upvotes: 1

Related Questions