0

help with divs plz/ iam trying this for while but no luck.

<div id='bg'>
    <div id ='contect'>
        <div id='image_left'>
        </div>
        <div id='image_right'>
        </div>
        <div id='image_right2''>
        </div>
        <div id='image_middle>
        </div>
        <div id='image_bottom'>
        </div>
        <div id='image_comment'>
        </div>
    </div>
</div>


#bg4 {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b1b7b6), color-stop(1, #CCC) );
    border:2px solid black;
}
#context4 {
    width: 1202px;
    margin: 0 auto;
    background:#CCC;
    border:2px solid gray;
}

#image_left
{
    float:left;
    border:2px solid pink;
}
#image_right
{
float:right;
border:2px solid red;
}
#image_right2
{
float:right;
clear:both;
border:2px solid orange;
}
#image_medium
{
    float:left;
    clear:both;
    border:2px solid yellow;
}
#image_bottom
{
border:2px solid green;
float:left;
clear:both;
}
#image_comment
{
    float:left;
    clear:both; 
}

//here is what iam trying to do
div1

//here is what this code does :(
wdiv

Edited by hwoarang69

2
Contributors
1
Reply
3
Views
5 Years
Discussion Span
Last Post by JorgeM
0

You had some typos in your example. Basically, you were on the right track. Just as I mentioned in the other thread that you had, you needed to add some widths and heights to the divs. Then use the floats and clears to ensure the divs are placed in the correct locations. Here is an example, you can modify the code to your needs.
Capture23

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#bg4 {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b1b7b6), color-stop(1, #CCC) );
    border:5px solid black;
    width:1205px;
    height:500px;
}
#contect {
    width: 1202px;
    margin: 0 auto;
    background:#CCC;
    border:5px solid gray;
    height:800px;
}
#image_left{
    float:left;
    border:5px solid pink;
    width:675px;
    height:250px;
}
#image_right{
float:right;
border:5px solid red;
    width:500px;
    height:100px;
}
#image_right2{
float:right;
clear:right;
border:5px solid orange;
    width:500px;
    height:100px;
}
#image_middle{
    float:left;
    clear:both;
    border:5px solid yellow;
    width:675px;
    height:250px;
}
#image_bottom{
    border:5px solid green;
    float:left;
    clear:both;
    width:675px;
    height:250px;
}
#image_comment{
    float:left;
    clear:both; 
}

</style>
</head>

<body>
<div id="bg">
    <div id ="contect">
        <div id="image_left">
        </div>
        <div id="image_right">
        </div>
        <div id="image_right2">
        </div>
        <div id="image_middle">
        </div>
        <div id="image_bottom">
        </div>
        <div id="image_comment">
        </div>
    </div>
</div>
</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.