iwillieyou iwillieyou - 5 months ago 12
HTML Question

div's inside a div weird space behavior

Website: http://quersteil.eu/

Problem is that the content_right div always appears on the bottom right of the last content_left div. Now,

float: left;
instead of
display: inline-block;
on #layout div does solve this problem but it completely disregards the height so that it has no
background-color
. As my height is dynamic i cant use
float:left;
, neither can i just
margin-top: -value;
. Couldn't find a solution here https://css-tricks.com/fighting-the-space-between-inline-block-elements/ either.
position: absolute;
on
#layout_right
works similar to
float:left;
,
position: relative;
on
#layout
hasnt helped fix that.



body {
margin: 0;
padding: 0;
background-color: #F0641D;
font-family: "Trebuchet MS", sans-serif;
color: #c4c4c4;
}
a {
color: #F0641D;
text-decoration: none;
}
#heading {
font-weight: bold;
letter-spacing: 2px;
font-size: 20px;
}
#header {
width: 100%;
height: 64px;
background-color: #383838;
}
#header_content {
width: 1000px;
margin: 0 auto;
}
#header_content div {
float: left;
}
#header_logo {
width: 114px;
height: 64px;
background-color: #505050;
}
#header_navbar {
width: 772px;
text-align: center;
}
#header_navbar div {
float: none;
display: inline-block;
margin-right: -5px;
border-bottom: 4px solid #505050;
transition: border-bottom 0.5s linear, background-color 0.5s linear;
}
#header_navbar div a {
display: block;
font-size: 25px;
padding: 15.5px 25px;
}
#header_navbar div:hover {
border-bottom: 4px solid #F0641D;
background-color: #505050;
}
#layout {
width: 976px;
margin: 16px auto;
padding: 12px;
background-color: #383838;
}
#layout div {
display: inline-block;
}
#layout_left {
width: 684px;
margin: 0 16px -16px 0;
}
#content_left {
padding: 4px 8px;
margin-bottom: 16px;
box-shadow: 0 0 8px #F0641D;
}
#content_right {
width: 260px;
padding: 4px 8px;
box-shadow: 0 0 8px #F0641D;
}

<!DOCTYPE html>

<html>

<head>
<title>Center of Rocket League eSports!</title>
<link href="style.php" type="text/css" rel="stylesheet" />
<link href="http://quersteil.eu//data/favicon.png" type="image/png" rel="icon">
<meta charset="UTF-8" />
<meta name="description" content="RocketLeague-Base provides every aspect of Rocket League eSports: News, Matches, Results, Events, Statistics and many more" />
</head>

<body>
<div id="header">
<div id="header_content">
<div id="header_logo">
<a href="http://quersteil.eu/"></a>
</div>

<div id="header_navbar">
<div id="news"><a href="index.php?page=news">News</a>
</div>
<div id="matches"><a href="index.php?page=matches">Matches</a>
</div>
<div id="results"><a href="index.php?page=results">Results</a>
</div>
<div id="events"><a href="index.php?page=events">Events</a>
</div>
<div id="stats"><a href="index.php?page=stats">Stats</a>
</div>
</div>
</div>
</div>

<div id="layout">
<div id="layout_left">
<div id="content_left">
<div id="heading">Welcome to RocketLeague-Base.com!</div>
<br>This site is currently under construction and is getting developed further and further everyday, be sure to check every now and then. When the site has finished it will be a data and information driven website all around Rocket League, comparable
towards <a href="http://www.hltv.org/" target="_blank">HLTV.org</a>. Rocket League eSports is on the rise and as are the expectations of everyone watching, to have an easy way looking for all the eSports action surrounding Rocket League. We are
in the makings of finishing the website as soon as possible, so that every Rocket League fan has a comfortable way to look at all News, Matches, Results, Events and Stats all around the great RL-eSports Scene. No need to go to 5 different webpages
anymore to look at upcoming matches or past Results, RocketLeague-Base.com is the solution!
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<!--

-->
<div id="layout_right">
<div id="content_right">
<img src="data/facebook.png">
<img src="data/twitter.png">
</div>
</div>
</div>
</body>

</html>




Answer

If you want the #layout_right div to be on right side of the content, just add the below to ur css...

#layout_right {
    float:right;
}

This will solve!

Comments