CODEWITHSUNDEEP
htmlcss
David Roldan
David Roldan

Reputation: 13

Placing 2 divs side by side in 1 div with float affects background color inside that div

Hi I'm trying to build a website for my clan but I'm having trouble with Float in CSS. Here's what I'm trying to do

I'm trying to create 2 divs side by side in 1 div but it keeps on disappearing the background color of the clanoverlay class. I'm getting really confused if I should use display: inline-block; because float: left; seems to make the background color dissapear. Here's an example:

div.colum2 {
	width: 100%;
	overflow: auto;
}

div.clanboard {
	font-family: SupercellMagic;
	font-size: 200%;
	color: white;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
	border-radius: 10px;
	background-color: #636a7c;
}
div.clanboardoverlay {
	background-color: #e4eff4;
	border-radius: 10px;
}

div.claninfo {
	font-size: 30px;
	width: 35%;
	padding: 10px 40px; 
	font-family: SupercellMagic;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
}

div.clanmembers {
	font-size: 30px;
	width: 35%;
	padding: 10px 40px; 
	font-family: SupercellMagic;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
}
<body style="background-color: black;">

<div class=colum1>
	<div class=clanboard>
		<center>Clan [in progress]</center>
		<div class=clanboardoverlay>
			<div class=claninfo style="float: left;">
			<img src="/imgsrc/badge.png" width="75">
			<span style="font-family: SupercellMagic;">ReAdY 4 War</span><br>
			<span style="color: grey; font-size: 17px;">Members: </span><span style="color: white; font-size: 20;">46/50</span>
			<hr><span style="color: black; font-size: 15;">looking for good loyal players ready to expand and have fun</span><hr>
			<span style="color: white; font-size: 15;">Clan Score</span><span style="color: white; float: right; font-size: 15;"><img src="/imgsrc/trophy.png" width="30px" style="vertical-align: text-top;">9828</img></span>
			<hr>
			<span style="color: white; font-size: 15;">Donations/week:</span><span style="color: white; float: right; font-size: 15;">1244</span>
			<hr>
			<span style="color: white; font-size: 15;">Type:</span><span style="color: white; float: right; font-size: 15;">Invite Only</span>
			<hr>
			<span style="color: white; font-size: 15;">Required trophies:</span><span style="color: white; float: right; font-size: 15;">0</span>
			<hr>
			<span style="color: white; font-size: 15;">Location:</span><span style="color: white; float: right; font-size: 15;">International</span>
			<hr>
			<span style="color: white; font-size: 15;">Clan tag:</span><span style="color: white; float: right; font-size: 15;">#G2PRPQ</span>
			</div>
			<div class=clanmembers style="float: right;">
			Just a test :)
			</div>
		</div>
	</div>
</div>
</body>

Link: http://ready4war.net/

Upvotes: 1

Views: 141

Answers (2)

Nora
Nora

Reputation: 3261

You need to clear the floats for the parent of the two floated elements. You can use overflow: hidden; or 

.clanboardoverlay {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

Upvotes: 1

CodeWeis
CodeWeis

Reputation: 856

wow try to not put the CSS in your HTML(that is not recommended)

why you not try to use flex-box?

.parent{
  width:100%;
  height:250px;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
   background-color:green;
}
.child{
  width:200px;
  height:200px;
  background-color:pink;
  border: 2px solid black;
}
<div class="parent">
<div class="child">

</div>
<div class="child">

</div>
</div>

Upvotes: 0

Related Questions