CODEWITHSUNDEEP
htmlcss
Thomas Hutton
Thomas Hutton

Reputation: 803

Put Two Divs Side By Side

I'm trying to put my two divs side by side: but the divs beneath them get smushed upwards. Looking like this:

enter image description here

Here's my HTML:

<div class="DSL6">
<h3 class="DSLLocation">DSL 6</h3>
</div>
<div class="DSLInformation">
</div>
<div class="FTTN10">
<h3 class="FTTNLocation">FTTN 10</h3>
</div>
<div class="FTTN15">
<h3 class="FTTNLocation">FTTN 15</h3>
</div>
<div class="FTTN25">
<h3 class="FTTNLocation">FTTN 25</h3>
</div>
<div class="FTTN50">
<h3 class="FTTNLocation">FTTN 50</h3>
</div>

And CSS:

.DSL6 {
  background-color: #dbdbdb;
  width: 250px;
  height: 150px;
  margin-top: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
  float: left;
  clear;
}
.DSLLocation {
  margin-top: 60px;
}
.DSLInformation {
  width: 850px;
  height: 150px;
  background-color: black;
  float: left;

}
.FTTNLocation {
  margin-top: 60px;
}
.FTTN10 {
  background-color: #dbdbdb;
  width: 250px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
}
.FTTN15 {
  background-color: #dbdbdb;
  width: 250px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
}
.FTTN25 {
  background-color: #dbdbdb;
  width: 250px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
}
.FTTN50 {
  background-color: #dbdbdb;
  width: 250px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
}

I've looked around, and I've tried different answers (both on other sites, and on Stack Overflow), but alas, no issues found.

What I want:

enter image description here

Upvotes: 0

Views: 212

Answers (1)

Khairul Islam
Khairul Islam

Reputation: 1215

You're getting this result because your total width of all div is larger than your screen width. see my modified css, here all the div is inline. And another one is you should use float: left for displaying div inline.

.wrapper{
  width: 500px;
}
.DSL6 {
  background-color: #dbdbdb;
  width: 150px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
  float: left;
  display: inline;
}
.DSLLocation {
  margin-top: 60px;
}
.DSLInformation {
  width: 300px;
  height: 150px;
  background-color: black;
  float: left;
  display: inline;
  border-style: solid;
  border-width: 1px;
  border-color: black;  

}
.FTTNLocation {
  margin-top: 60px;
}
.FTTN10 {
  background-color: #dbdbdb;
  width: 150px;
  height: 150px;
  border-style: solid;
  float: left;
  display: inline;
  border-width: 1px;
  border-color: #D3D3D3;
}
.FTTN15 {
  background-color: #dbdbdb;
  width: 50px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  display: inline;
  float: left;
  border-color: #D3D3D3;
}
.FTTN25 {
  background-color: #dbdbdb;
  width: 50px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  display: inline;
  float: left;
  border-color: #D3D3D3;
}
.FTTN50 {
  float: left;
  background-color: #dbdbdb;
  width: 50px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  display: inline;
  border-color: #D3D3D3;
}
<div class="wrapper">
<div class="DSL6">
<h3 class="DSLLocation">DSL 6</h3>
</div>
<div class="DSLInformation">
</div>  
<div class="FTTN10">
<h3 class="FTTNLocation">FTTN 10</h3>
</div>
<div class="DSLInformation">
</div>   
</div>

EDIT SUMMARY

Edited the html as the OP's requirement.

Upvotes: 1

Related Questions