CODEWITHSUNDEEP
htmlcsscss-float
user1724345
user1724345

Reputation:

Fix DIV in left and right in HTML

I'm new in web design. I want to design 2 box that one of them is in the left and another one is in the right. The boxes are fix in browser maximize state, but when I resize the browser and make it minimize, right box go down of the left box.

Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" >
        <link type="text/css" rel="stylesheet" href="style.css" />
        <title>.: Home :.</title>
    </head>
    <body>
        <div class="main" >
            <div class="left" >&nbsp;</div>
            <div class="right" >
                <div class="search" >&nbsp;</div>
                <div class="login" >&nbsp;</div>
            </div>
        </div>
    </body>
</html>

style.css

body {
    margin: 0px;
    padding: 0px;
    background-color: #c4c4c4;
}

div.main {
    width: 100%;
    display: inline-block;
    background-color: red;
}

div.left {
    float: left;
    width: 300px;
    height: 500px;
    margin-top: 50px;
    margin-left: 100px;
    display: inline-block;
    background-color: blue;
}

div.right {
    float: right;
    width: 800px;
    height: 500px;
    margin-top: 50px;
    margin-right: 100px;
    display: inline-block;
    background-color: green;
}

enter image description here

enter image description here

Upvotes: 0

Views: 3992

Answers (3)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

You need fixed width on your main DIV

div.main {
    width: 1350px;
    display: inline-block;
    background-color: red;
}

Use id where possible instead class, it's faster eg: class="main" could be an ID.

WORKING DEMO

EDIT

If you want 100% width on main div then use a wrapper div with fixed width:

<div class="main" >
   <div id="wrapper" style="width:1350px;"> 
      <div class="left" >&nbsp;</div>
       <div class="right" >
            <div class="search" >&nbsp;</div>
            <div class="login" >&nbsp;</div>
       </div>
    </div>
</div>

Updated DEMO with 100% main DIV

Upvotes: 1

harikrishnan.n0077
harikrishnan.n0077

Reputation: 2057

Change div.main width from % to px. Also you can set a min-width so that browser does not reduce the element before that.

Upvotes: 0

GeorgeBuckingham
GeorgeBuckingham

Reputation: 195

The reason for this is that your boxes are of fixed width, with margins. If you resize the browser window so it is smaller than the amount of space required to show both boxes side-by-side, then the right box will display below the left box, where it has space.

There is no fix for this from the details in your description. However, you should try basing your layout on percentages (e.g. width:25%).

Upvotes: 0

Related Questions