How To Make Div Beside Div

Question

HTML

Solution 1:

#adv needs float:left, so it floats to the left (and #flag floats to the right, next to it, because of float: right).

Solution 2:

try this

#header
    {
        background-color:Blue;
        height:10%;
        width:100%;
        position:relative
    }
    #flag
    {
    background-color:Red;
    height:100%;
    width:65%;  
    position:absolute;
        top:0;
        right:0;
    }

Solution 3:

Try this: Normally: (somebody please correct me if I'm wrong on this):

Widths and heights should be set in pixel height-width from the beginning instead of percentages because the code will be easier to work with later. Also, I'm sure both elements should float left because then the code will be again, easier to work with and will follow better code conventions. Also, I added margins for easier viewing. You can always delete them if you wish. Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> This is my site </title>
    <link rel="stylesheet" type="text/css" href="example1.css">
</head>
<body>
    <div id="bigger">
        <div id="header">
            <div id="adv">                        
            </div>  
            <div id="flag">
            </div>      
        </div>
    </div>
</body>
</html>

CSS:

#bigger
{
    height:1280px;
    width:880px;
    margin:0px 0px 0px 0px;    
    position:absolute    
}

#header
{
    background-color:Blue;
    height:90px;
    width:1290px;
    overflow: hidden;
}

#adv
{
    background-color:Yellow;
    height:80px;
    width:840px;  
    margin: 5px;
    float: left;
}

#flag
{
    background-color:Red;
    height:80px;
    width:420px;   
    margin: 5px; 
    float:left;
}

Build Html5

How To Make Div Beside Div

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How To Make Div Beside Div"