CODEWITHSUNDEEP
htmlcss
abedzantout
abedzantout

Reputation: 832

How do I fit the inner box inside the outer box?

So I am attempting to code a fluid layout, and am experimenting with the float tag. The first step was to develop a simple fluid layout that has two divisions that fill the whole page in width. The blue box has a width of 25%, the color #0076a3. The height is 600 pixel, the green box ha sa width of 75%, the color # 7cc576. The height is 600 pixels. Then I want to add 4 boxes inside the blue box, each has a height for 150 pixels.

Afterwards, I wanted to place those two divisions (that are formed from the left division and right division) at the center of another that has a width of 1200px. The Problem I am facing is that only I can fit the inner box(blue boxes and green one) inside the outer box(gray one) properly.

#mainDiv {
  width: 1200px;
  margin: 0 auto;
  background-color: #c2c2c2;
}
#leftDiv,
#rightDiv {
  height: 600px;
  margin: 0px;
}
#leftDiv {
  width: 25%;
  background-color: #0076a3;
  float: left;
}
#rightDiv {
  width: 75%;
  background-color: #7cc576;
}
#box1,
#box2,
#box3,
#box4 {
  height: 150px;
  clear: both;
}
#box1 {
  background-color: #6dcff6;
}
#box2 {
  background-color: #00bff3;
}
#box3 {
  background-color: #00aeef;
}
#box4 {
  background-color: #0076a3;
}
<div id="mainDiv">
  <div id="leftDiv">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
  </div>
  <div id="rightDiv"></div>
</div>

This final output should look like this:

Final output

Upvotes: 1

Views: 1418

Answers (4)

cocoa
cocoa

Reputation: 3921

What if you just add padding to #mainDiv? Like this: 

#mainDiv {
  height: 600px;
  width: 800px;
  margin: 0 auto;
  padding: 0 200px 200px 200px;
  background-color: #c2c2c2;
}
#leftDiv,
#rightDiv {
  height: 600px;
  margin: 0px;
}
#leftDiv {
  width: 25%;
  background-color: #0076a3;
    float: left;
}
#rightDiv {
  width: 75%;
  background-color: #7cc576;
    float: left;
}
#box1,
#box2,
#box3,
#box4 {
  height: 150px;
}
#box1 {
  background-color: #6dcff6;
}
#box2 {
  background-color: #00bff3;
}
#box3 {
  background-color: #00aeef;
}
#box4 {
  background-color: #0076a3;
}
<div id="mainDiv">
  <div id="leftDiv">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
  </div>
  <div id="rightDiv"></div>
</div>

Upvotes: 1

Ananthaprakash
Ananthaprakash

Reputation: 131

Try the following code. 

 #mainDiv {
        height:700px;
        margin: 0 auto;
      }
      #container{
        height:90%;
        background-color: #c2c2c2;
        padding: 0 100px;
      }
      #leftDiv,
      #rightDiv {
        height: 500px;
        margin: 0px;
        float: left;
      }
      #leftDiv {
        width: 25%;
        background-color: #0076a3;
      }
      #rightDiv {
        width: 75%;
        background-color: #7cc576;
      }
      #box1,
      #box2,
      #box3,
      #box4 {
        height: 125px;
        clear: both;
      }
      #box1 {
        background-color: #6dcff6;
      }
      #box2 {
        background-color: #00bff3;
      }
      #box3 {
        background-color: #00aeef;
      }
      #box4 {
        background-color: #0076a3;
      }
<html lang="en">
  <head>
    <title>Page Title</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatibile" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="netguru recruitment task">
  </head>
  <body>
    <div id="mainDiv">
      <div id="container">
        <div id="leftDiv">
          <div id="box1"></div>
          <div id="box2"></div>
          <div id="box3"></div>
          <div id="box4"></div>
        </div>
        <div id="rightDiv"></div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

JRulle
JRulle

Reputation: 7568

The float: left should be applied to both #leftDiv and #rightDiv.

EDIT: I modified my answer to include a div#container to position the floated elements within the grey box parent.

#mainDiv {
  width: 1200px;
  margin: 0 auto;
  background-color: #c2c2c2;
}
#container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
#container:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
#leftDiv,
#rightDiv {
  height: 600px;
  margin: 0px;
  float: left; /* float moved here */
}
#leftDiv {
  width: 25%;
  background-color: #0076a3;
}
#rightDiv {
  width: 75%;
  background-color: #7cc576;
}
#box1,
#box2,
#box3,
#box4 {
  height: 150px;
  clear: both;
}
#box1 {
  background-color: #6dcff6;
}
#box2 {
  background-color: #00bff3;
}
#box3 {
  background-color: #00aeef;
}
#box4 {
  background-color: #0076a3;
}
<div id="mainDiv">
  <div id="container">
    <div id="leftDiv">
      <div id="box1"></div>
      <div id="box2"></div>
      <div id="box3"></div>
      <div id="box4"></div>
    </div>
    <div id="rightDiv"></div>
  </div>
</div>

Upvotes: 1

rockmandew
rockmandew

Reputation: 860

Okay so I got it working but For some reason I can't seem to find where the extra whitespace is coming from on either the blue or green box but there is a little space between them - which is while you'll see I adjusted the width of the blue box to be 24.66% which allows them to be on the same line - I also took away the floats and clears - you want to use "inline-block" for this.

Here is a Fiddle for you to play with: https://jsfiddle.net/rockmandew/Lkkuzmh9/

#leftDiv {
    width: 24.66%;
    background-color: #0076a3;
    display:inline-block;
}
#rightDiv {
    width: 75%;
    background-color: #7cc576;
    display:inline-block;
}

Let me know if you have any questions.

Upvotes: 1

Related Questions