CODEWITHSUNDEEP
htmlcss
Renekton_Fan
Renekton_Fan

Reputation: 151

How do I remove the gap between these two div sections?

My HTML code looks a bit like this, and for some reason it keeps misaligning or inserting an uncontrollable gap.

<section id="boxes">

<div id="boxes1">
<ul>
<li>Justs the Facts</li>            
</ul>
</div>

<div id="boxes2">
<ul>
<li>Visit Neptune</li>
</ul>
</div>

</section>

The relevant CSS is here:

#boxes {
  width:700px;
  background-color: #ffffff
}
#boxes1 {
  width: 350px;
  float: left;
}
#boxes2 {
  width: 350px;
  float: right;
}

This creates something like two blocks, with a gap in between. How could I create it so that there's no margin or gap between the div section of boxes1 versus boxes2?

Upvotes: 1

Views: 11506

Answers (6)

Shakeel
Shakeel

Reputation: 95

Use this.

#boxes ul {
    margin:0;
    padding:0;
}

Upvotes: 0

Felipe Fialho
Felipe Fialho

Reputation: 1

#boxes1{
width: 50%;
float: left;
#boxes2 {
width: 50%;
float: left; 
}

Try this...

Upvotes: 0

choudhury smrutiranjan parida
choudhury smrutiranjan parida

Reputation: 2748

This should do the needful.

#boxes{
 width:700px;
 background-color: #ffffff
  }
#boxes1{
 width: 350px;
 float: left; 
 }
#boxes2 {
width: 350px;
float: left;

}

You can check it here:

http://jsfiddle.net/wBjZw/

Upvotes: 0

Mohsen Safari
Mohsen Safari

Reputation: 6795

you must float two boxes to the same direction, right or left.

#boxes1{
width: 350px;
float: left; /*or right*/ }
#boxes2 {
width: 350px;
float: left; /*or right*/ 
}

Upvotes: 0

Jeffpowrs
Jeffpowrs

Reputation: 4540

Use this for both boxes.

.boxes {
  width: 50%;
  float: left;
}

Upvotes: 2

Mohamad
Mohamad

Reputation: 35339

This is because you are floating your div elements in opposite directions.

#boxes1 {
  width: 350px;
  float: left;
}
#boxes2 {
  width: 350px;
  float: right;
}

Float both of them to the left.

#boxes1, #boxes2 {
  width: 350px;
  float: left;
}

Upvotes: 0

Related Questions