I can’t seem to figure out how to float my siderbar left and my main content right.
Everything I do seems to push the main-contentclass below the sidebar. Tried putting in rows and changing the widths but but the result stays the same. Any help is really appreciated. Pretty new to this game.
CSS
.sidebar {
width: 400px;
float: left;
margin-right: 48px;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul .active a {
color: #2e2e2e;
}
.main-content {
width: 600px;
float: right;
margin-bottom: 48px;
}
.main-content img {
margin-bottom: 24px;
}
<!-- PORTFOLIO AREA -->
<div class="container">
<div class="row">
<div class"sidebar">
<h4>Services we offer</h4>
<ul>
<li class="active"><a href="#">Project Name</a></li>
<li><a href="#">Full groom</a></li>
<li><a href="#">Full groom</a></li>
<li><a href="#">Full groom</a></li>
</ul>
</div> <!--end sidebar -->
<div class="main-content">
<h3>Full groom</h3>
<p>lorem there was a a bar maid in sale , who tattooed on her chest all the prices of ale. and on her behind, for the sake of the blind, she had the same thing tattooed but in braille</p>
<img src="C:UsersSueDesktopphotoshopimagesservice1.jpg" alt="Dog1">
<img src="C:UsersSueDesktopphotoshopimagesservice2.jpg" alt="Dog2">
</div> <!-- end main-content -->
</div> <!-- end row -->
</div> <!-- end container -->
3
Answers
See if this works for you, I have changed the width to
%
if you want it to be inpx
let me know.using flex
You don’t need
floats
. I would recommend usingflex
. You will have more control over the DOM.