CODEWITHSUNDEEP
htmlcsspositioning
kendrickLamar
kendrickLamar

Reputation: 3

CSS - Boxes inside box

I'm trying to build my first website and I'm having a problem! The left and right boxes - named "leftSidebar" and "rightSidebar" - are supposed to be next to the middle content (to the left and to the right of it), but they're just passing through the body and aren't inside the body box (tested with borders). What am I doing wrong? I want the left and right side bar to be next to the middle content!

Also, they're crossing through the body box so far to the bottom, that - when I scroll down - my background stops and a white background appears! Maybe you can test it with a background of yourself?

Please help me as soon as possible, goin cray already

Thanks

body {
	background-image: url(wp1.jpg);
	background-size: 100%;
    background-repeat: no-repeat;
	color: white;
}

.body {
	width: 70%;
	border: 1px solid white;
	margin: 5% auto;
	clear: both;
	
}

a {
	text-decoration: none;
}

nav ul li {
	list-style-type: none;
}

.navHeader nav ul li {
	float: left;
	display: inline;
	margin: 0 auto;
}

.navHeader nav {
	border-radius: 5px;
	border: 1px dashed white;
	height: 50px;
}

.navHeader {
	background-color: black;
}

.leftSidebar { 
	float: left;
	border: 1px white solid;
	border-radius: 2px;
	margin: 2% 0 2% 2%;
	width: 20%;
	
}

.rightSidebar { 
	float: right;
	border: 1px white solid;
	border-radius: 2px;
	margin: 2% 0 2% 2%;
	width: 20%;
}

.allContent {
	background-color: black;
	width: 60%;
	text-align: center;
	margin: 0 auto;
}
	<body class="body">
	
	<header class="navHeader">
		<nav><ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a></li>
			<li><a href="#">Programming</a></li>
			<li><a href="#">Downloads</a></li>
			<li><a href="#">Contact</a></li>
		</nav></ul>
	</header>	
	
	
		<aside class="leftSidebar">
			<content>
				<h3> Sidebar Left Title </h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</content>
		</aside>
		
				
	
		
		<aside class="rightSidebar">
			<content>
				<h3> Sidebar Right Title </h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</content>
		</aside>
		
	<div class="allContent">
	
		<article class="middleContent">
			<content>
				<h2> This Is A Post </h2>
			
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</content>
		</article>

		
		<footer class="footerdown">
			<p>Copyright &copy; <a href="#" title="black papiyon">blackpapiyon.com</a></p>
		</footer>
	
	</div>
	
	
	</body>
</html>

Upvotes: 0

Views: 192

Answers (1)

Ragdoll
Ragdoll

Reputation: 335

You have a number of issues you need to address in your code. First, it is unwise to give your <body> an explicit width, unless you really know what you're doing. Just let the browsers do their thing and use a wrapper <div>, instead.

Second, when doing float-based layouts, all of your columns should probably be floated, and probably in the same direction. An unfloated box will flow around floated elements. That said, if you're only targeting reasonably modern browsers, a flexbox-based layout would be better.

Third, the <content> tag is used inside of Shadow DOM, and is not a standard HTML tag. Furthermore, it’s been deprecated. Use a <div> instead.

I don't know that this will solve your problem exactly, but it will at least put you on the right track.

Upvotes: 1

Related Questions