CODEWITHSUNDEEP
csshtml
Tom
Tom

Reputation: 2847

Alignment of three divs

I want the style of three div align as same as the following picture. How can I achieve that?

enter image description here

I write html code like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#container{
background-color:#00ff00;
width:500px;
height:500px;
}
#leftDiv{
background-color:#ff0000;
width:250px;
height:500px;
}
#rightDiv{
background-color:#0000fff;
widht:250px;
height:500px;
}
#other{
background-color:#ffff00;
widht:500x;
height:500px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftDiv">
</div>
<div id="rightDiv">
<img src="Koala.jpg">
</div>
</div>
<div id="other">
</div>
</body>
</html>

But the result is not as my expectation，the is representation of my code： enter image description here

I want to put a picture into the 2nd(rightDiv) div.

Please help.

Thanks.

Upvotes: 0

Views: 98

Answers (3)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Hi is very simple just change to your stylesheet and do it.

css

  .container{
background-color:green; width:500px;
}

.leftDiv{
background-color:red; width:250px;
height:500px;
float:left;
}

.rightDiv{
background-color:pink; width:250px;
height:500px;
float:left;
}

.other{
background-color: #FFFF00;
height:500px;
clear:both;
}

html 

<div class="container">

    <div class="leftDiv">left</div>
    <div class="rightDiv">right</div>

    <div class="other">middle</div>


</div>

and now check this http://jsfiddle.net/rohitazad/PLdyw/4/

Upvotes: 0

Muhammad Sannan Khalid
Muhammad Sannan Khalid

Reputation: 3137

try out this css.

.container{
background-color:green; width:500px;
height:500px;
position:relative;}

.leftDiv{
    float:left;
background-color:red; width:250px;
height:500px;
}

.rightDiv{
background-color:pink; width:250px;
height:500px;
float:left;
}

.other{
background-color: #FFFF00;
    clear:both;
    width:500px;
height:500px;
}

Upvotes: 0

apnerve
apnerve

Reputation: 4829

The style rule you wrote for #other is wrongly typed. It should be width and not widht.

#other{
  background-color:#ffff00;
  widht:500x; /* This should have been 'width'. Resorting to StackOverflow for a typo error? :-o */
  height:500px;
}

PS: Please check your typographic errors before posting to StackOverflow. Thanks.

Upvotes: 1

Related Questions