Wei Jian Guo Wei Jian Guo - 2 months ago 7
CSS Question

how to make those two divs in one line

doc.html

<!DOCTYPE html>
<html>

<head>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container elem">
<div class="nav"></div>
<div class="elem column"></div>
</div>
</body>
</html>


css2.css

.column{
background-color: orange;
width:75%;
vertical-align: top;
display: inline-block;
height:200px;
}
.nav{
vertical-align: top;
display: inline-block;
width:25%;
background-color:lightgreen;
height:200px;
}
*{
box-sizing: border-box;
padding:0px;
margin :0px;
}


I wrote doc.html and css2.css according to this guide learnlayout. but the page looks like this.
how to make those two parts in one line?
doc.html

Answer

This is the typical whitespace problem with inline-block. You can always solve it by assigning font-size: 0; to the parent element.

.container.elem {
  font-size: 0;
}
/* remember to reset font-size to what you need in child elements */

.column {
  background-color: orange;
  width: 75%;
  vertical-align: top;
  display: inline-block;
  height: 200px;
}
.nav {
  vertical-align: top;
  display: inline-block;
  width: 25%;
  background-color: lightgreen;
  height: 200px;
}
* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}
<div class="container elem">
  <div class="nav"></div>
  <div class="elem column"></div>
</div>

Another solution would be to make both divs float left, but that has it's own problems and complexity which is why I'd advise sticking with inline-blocks.

Comments