Member Avatar for hwoarang69

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
  • 142 Views
  • 21 Minutes Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.