CODEWITHSUNDEEP
htmlcssalignment
Ivan
Ivan

Reputation: 180

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?

Upvotes: 0

Views: 46

Answers (2)

andreas
andreas

Reputation: 16936

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>

Upvotes: 2

Mattonit
Mattonit

Reputation: 601

Use box-sizing. This code should work:

* {
  box-sizing: border-box;
}

Upvotes: 0

Related Questions