CODEWITHSUNDEEP
htmlcssmenu
Miguel
Miguel

Reputation: 3054

How to have two divs, one left side another right side of parent div?

I need to make a parent div and within two divs, one that should be on the left side and another in the right.

My problem is that the div in right side is positioned out of the main parent "menu-bar-contained". How can I force it to stay inside?

#menu-bar-container {    
	border-top: 1px solid #CCCCCC;
	background-color: #BB1919;
	width:100%;
	height:70px;    
}    
#menu-bar {    
	width:1000px;
	margin:0 auto;    
}    
h1 {
	padding:0;
	margin:0;
	color:white;
	font-size: 40px;
	font-weight: normal;
	padding-top: 10px;
	float:left;
}    
#local-news {
	border: 1px #BB4545 solid;
	float:right;
	width:250px;
	padding: 5px 5px 0 10px;
	margin: 5px 10px 0 0;    
}    
#local-news a {    
	color:black;
	text-decoration: none;
	font-size:30px;
	position:relative;
	top:-8px;    
}    
#local-news a:hover {    
	text-decoration: underline;    
}
<div id="menu-bar-container">
	<div id="menu-bar">
		<h1>NEWS</h1>
		<div id="local-news">
			<a href="#">Find local News</a>
		</div>
	</div>
</div>

live:

https://jsfiddle.net/5h10e7xt/2/

Upvotes: 1

Views: 919

Answers (3)

TaouBen
TaouBen

Reputation: 1315

The reason your second div is outside the parent div is because you set the menu-bar to a fixed width: 1000px

try this : 

#menu-bar {

   width:100%;
   margin:0 auto;

}

and You wont see it outside.

Upvotes: 1

r_batra
r_batra

Reputation: 410

You need to have float attribute for the div. In style attribute for div : menu-bar mention as and same for other one

Upvotes: 0

Matt
Matt

Reputation: 324

Use flex on the container:

display: flex;

Remove the float from the child divs.

Upvotes: 0

Related Questions