CODEWITHSUNDEEP
htmlcss
nooby
nooby

Reputation: 85

CSS layout changes when i resize browser. I've only been coding for a few weeks and have hit a brick wall

Hi I've looked on W3 and here but cant find answer. I've achieved the layout I want, but it falls apart when i start to resize the browser. I've been coding for six weeks. Why won't the layout behave?

  div {
  border: 1px solid black;
  padding: 10px;
}

#head {
  background-color: red;
  height: 150px;
  color: white;
  font-size: 50px;
  text-align: center;
}

#left {
  display: inline-block;
  width: 47%;
  height: 300px;
  overflow: auto;
}

#right {
  display: inline-block;
  width: 49%;
  height: 300px;
  float: right;
  overflow: auto;
}

#footer {
  height: 100px;
  background-color: blue;
  color: white;
  }
<div id="head"> The Daily Scumbag</div>
<div id="left">
  <h1>This is left column.
  </h1>
  Lorem Vestibulum
</div>
<div id="right">

Upvotes: 0

Views: 54

Answers (3)

srikar reddy
srikar reddy

Reputation: 46

it's because you need to write the responsive code where webpage automatically adjusts to the size of the browser. You can achieve this with the help of the twitter bootstrap.

All the best.

Upvotes: 0

hallleron
hallleron

Reputation: 1992

Well, your basic idea was good, but you got some things not ideal here.

I think you know for yourself that manually setting one div to width: 47%; and the other one to 49% is not ideal. I guess you want 50% each. You do not need display:inline-block; in this case when you want to use float.

More important, for easier css management, I would add box-sizing:border-box; to your div css declaration. It prevents the border and the padding from being added ontop of the width and ensures that you can use width: 50%; accordingly (read more on this here: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp).

See this updated example here:

<style>
html,body{
    padding:0;
    margin:0;
}
div {
    border: 1px solid black;
    padding: 10px;
    box-sizing:border-box;
}

#head {
    background-color: red;
    height: 150px;
    color: white;
    font-size: 50px;
    text-align: center;
}
#left {
    float:left;
    width: 50%;
    height: 300px;
    overflow: auto;


}
#right {
    width: 50%;
    height: 300px;
    overflow: auto;
}
#footer {
    clear:left;
    height: 100px;
    background-color: blue;
    color: white;
}
</style>

A note to:

html,body{
    padding:0;
    margin:0;
}

This prevents Browsers from using their default values, this removes the space you have around your elements and the browser window.

Upvotes: 1

Germano Plebani
Germano Plebani

Reputation: 3625

Use box-sizing: border-box; on the floating element to include padding and border. Padding and border are added to the width.

  div {
  border: 1px solid black;
  padding: 10px;
}

#head {
  background-color: red;
  height: 150px;
  color: white;
  font-size: 50px;
  text-align: center;
}

#left {
  display: inline-block;
  width: 47%;
  height: 300px;
  overflow: auto;
  box-sizing: border-box;
}

#right {
  display: inline-block;
  width: 49%;
  height: 300px;
  float: right;
  overflow: auto;
  box-sizing: border-box;
}

#footer {
  height: 100px;
  background-color: blue;
  color: white;
  }
<div id="head"> The Daily Scumbag</div>
<div id="left">
  <h1>This is left column.
  </h1>
  Lorem Vestibulum
</div>
<div id="right">

Upvotes: 0

Related Questions