CODEWITHSUNDEEP
htmlcss
Colin Bruin
Colin Bruin

Reputation: 93

How can I get two divs to fill up the <body> page width

When opening this up in a browser, the combined width of the two divs does not fully fulfill the width of the body. I have made the background color of the second (right) div black so you can see the white space between the second div and the right side of the page. I tried messing with the border, margin but maybe I did it wrong.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>

<body>
<div id="wrapper">
    <main>
        <div id="div1">
            <img src="font-header.png" alt="Image Logo Header">
        </div>
        <div id="div2">
        </div>
    </main>
</div>
</body>
</html>

CSS:

img {
    border-bottom: 4px solid black;
    position: relative;
    left: 30px;
}
body {
    margin: 0;
}
#div1 {
    height: 756px;
    width: 300px;
    border: 2px solid black;
    float: left;
}
#div2 {
    height: 758px;
    width: 1216px;
    overflow: hidden;
    background-color: black;
}

Upvotes: 1

Views: 655

Answers (2)

Thinkerman
Thinkerman

Reputation: 54

Position the divs absolutely and apply media queries so they will be responsive. Hope this helps.

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Form Example</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="home2.css">

    <style>

        img {
        border-bottom: 4px solid black;
        position: relative;
        left: 30px;
        }
        body {
            margin: 0;
            width: 100%;
        }
        #div1 {
            height: 756px;
            width: 25%; //change width to fit your need
            border: 2px solid black;
            float: left;
            left:0;
            position: absolute;
        }
        #div1 img{
            left: 0;
        }
        #div2 {
            height: 758px;
            width: 75%; //change width to fit your need
            overflow: hidden;
            background-color: blue;
            right:0;
            position: absolute;
        }

    </style>
    </head>

    <body>
    <div id="wrapper">
        <main>
            <div id="div1">
                <img src="font-header.png" alt="Image Logo Header">
            </div>
            <div id="div2">
            </div>
        </main>
    </div>
    </body>
    </html>

Upvotes: 0

poushy
poushy

Reputation: 1134

Since you are using fixed width, it will not adjust properly to your screen. And in different resolutions it will not adjust correctly to your screen size. Instead use % width.

#div1 {
   height: 756px;
   width: 35%;
    float: left;
}
#div2 {
    height: 758px;
    width: 65%;
    overflow: hidden;
    background-color: black;
}

I've setup this fiddle with your example: https://jsfiddle.net/5yfnLcdt/

Upvotes: 0

Related Questions