Ivan Ivan - 1 month ago 9
CSS Question

Can't align one column with DIVs with another DIV

I'm trying to have a colum with some DIVs on the left, and a big DIV on the right. I've started to try it on a fiddle and my first problem comes when I assign the border attribute to my DIVs.

HTML:

<div id="container">
<div id="iframe"></div>
<div id="tab1"></div>
</div>


CSS:

#container {
margin:0;
background-color:yellow;
height: 500px;
width:100%;
}
#iframe{
width: 85%;
height: 100%;
float: right;
border: 1px solid red;
}
#tab1 {
width: 15%;
height: 15%;
float:left;
border: 1px solid green;
}


View on Fiddle

Anyway, I'm looking forward this goal (So maybe my approach is not the correct one...)

project.png

Any ideas?

Answer

Your border width is extending your elements width. Just add box-sizing: border-box; to your elements to include your border into the given width. Then the floating should be as intended.

You can read more about the CSS box model on MDN (thanks for the hint in the comments @tabs1200).

#iframe{
  ...
  box-sizing: border-box;
}

#tab1 {
  ...
  box-sizing: border-box;
}

Here is a working example:

#container {
  margin: 0;
  background-color: yellow;
  height: 500px;
  width: 100%;
}
#iframe {
  width: 85%;
  height: 100%;
  float: right;
  border: 1px solid red;
  box-sizing: border-box;
}
#tab1 {
  width: 15%;
  height: 15%;
  float: left;
  border: 1px solid green;
  box-sizing: border-box;
}
<div id="container">
  <div id="iframe"></div>
  <div id="tab1"></div>
</div>