CODEWITHSUNDEEP
htmlcssspace
confused5000
confused5000

Reputation: 59

Gap between top and bottom divs - how to get rid of it?

How do I get my "TextDiv" to sit right below the "TopDiv"? There's a weird gap between the two divs, is there a CSS reason why it's like that? Thank you

[sorry, had to had to add this extra comment or my thread wouldn't post.]

Upvotes: 0

Views: 539

Answers (5)

Erol Aliyev
Erol Aliyev

Reputation: 65

This code can help

.OuterBorder {
    border: 1px solid black;
    width: 120px;
    height: 140px;
    float: left;
    }
.TopDiv {
    width: 80px;
    height:80px;
    border: 1px solid black;
    float: left;
}
#TextDiv {
    border: 1px solid black;
    width: 80px;
    position: absolute;
    left: 80px;
}
.TopRightDiv {
    float: left;
}
.Minibox {
    border: 1px solid black;
    width:20px;    
}
.MiniImg {
    width: 20px;
    height: 20px;
}

Upvotes: 0

user7613413
user7613413

Reputation:

Try this: 

.TopRightDiv {
    float: right;
    margin-right: 15px;
}

Upvotes: 0

AG_
AG_

Reputation: 2689

The height of TopRightDiv pushing TextDiv to down. Make TopRightDiv right align and set the position with margin-right.

.TopRightDiv {
    float: right;
    margin-right:16px;
}


.OuterBorder {
	border: 1px solid black;
	width: 120px;
	height: 140px;
	float: left;
}
.TopDiv {
	width: 80px;
	height:80px;
	border: 1px solid black;
	float: left;
}
#TextDiv {
	border: 1px solid black;
	width: 80px;
	float: left;
}
.TopRightDiv {
	float: right;
  margin-right:16px;
}
.Minibox {
	border: 1px solid black;
 	width:20px;    
}
.MiniImg {
	width: 20px;
	height: 20px;
}
<div class="OuterBorder" data-menuid="Menu1">
	<a href="#"><img src="#" class="TopDiv"></a>
		
	<div class="TopRightDiv" id="Menu1">
		<a href="#"><div class="Minibox">
			<img src="#" class="MiniImg">
		</div></a>
		<a href="#"><div class="Minibox">
			<img src="#" class="MiniImg">
		</div></a>
		<a href="#"><div class="Minibox">
			<img src="#" class="MiniImg">
		</div></a>
		<a href="#"><div class="Minibox">
			<img src="#" class="MiniImg">
		</div></a>
	</div>
	
		<div id="TextDiv">Text</div>
</div>

Upvotes: 0

user7761868
user7761868

Reputation: 94

Try the following css

.OuterBorder {
    border: 1px solid black;
    width: 120px;
    height: 140px;
    float: left;
}
.TopDiv {
    width: 80px;
    height:80px;
    border: 1px solid black;
    float: left;
}
#TextDiv {
    border: 1px solid black;
    width: 80px;
  position: absolute;
  top: 90px;
}
.TopRightDiv {
    float: left;
}
.Minibox {
    border: 1px solid black;
    width:20px;    
}
.MiniImg {
    width: 20px;
    height: 20px;
}

Upvotes: 0

flyingL123
flyingL123

Reputation: 8076

You have three separate divs all floating left. The third one is pushed down by the height of the second one.

Try putting the first and third in a div together, and floating a second one next to that.

<style>
   #leftWrap { float: left; }
   #topRight { float: left; }
</style>

<div id="leftWrap">
   <div id="topLeft"></div>
   <div id="textDiv"></div>
</div>
<div id="topRight"></div>

Upvotes: 1

Related Questions