CODEWITHSUNDEEP
htmlcssstyling
Melchior
Melchior

Reputation: 45

I need to add a sidebar to the right of my content

I got an assignment to make a website for the "Olympic boxing tournament", which needs to include a right sidebar. I tried for almost a day now but i can't seem to find a way to let it appear next to the main content section.

Here is my code:

<div class="wrapper">
<div class="content-main content-style">
 <h1>Hier komt de content van de main sectie.</h1>
 <p>Mooie content </p>
</div>

<div class="content-right content-style">
 <h1>Hier komt de content van de right-sidebar</h1>
 <p>mooie content he?</p>
</div>

And here the CSS :

.content-style {
    background-color:rgba(120, 135, 171,0.5);
    text-align:center;
}
 .content-main {
    width: 50%;
    margin-left: 450px;
}

.content-right{
   width: 15%;
   float:right;
   position: relative;
}

I think it should be a very easy thing; I just can't figure it out.

Upvotes: 2

Views: 63

Answers (3)

Karl Dawson
Karl Dawson

Reputation: 977

Without changing your markup, this is the CSS you need. The CSS on the wrapper is to ensure that it properly surrounds the floated elements. This is usually applied as a class called clearfix, as you'll use it often.

.wrapper:before,
.wrapper:after {
  content: " ";
  display: table;
}

.wrapper:after {
  clear: both;
}

.content-style {
  background-color: rgba(120, 135, 171, 0.5);
  text-align: center;
}

.content-main {
  float: left;
  width: 84%;
}

.content-right {
  width: 15%;
  float: right;
  position: relative;
}

Upvotes: 0

Anton
Anton

Reputation: 2666

Here is a working fiddle.

Please notice that the floating element should come first. That is the main point.

<div class="wrapper">

<div class="content-right content-style">
 <h1>Hier komt de content van de right-sidebar</h1>
 <p>mooie content he?</p>
</div>

<div class="content-main content-style">
 <h1>Hier komt de content van de main sectie.</h1>
 <p>Mooie content </p>
</div>

</div>

.content-style {
    background-color:rgba(120, 135, 171,0.5);
    text-align:center;
}
 .content-main {
    width: 80%;
}

.content-right{
   width: 15%;
   float:right;
   position: relative;
}

Upvotes: 1

Mike Donkers
Mike Donkers

Reputation: 3699

Change your 

.content-main {
    width: 50%;
    margin-left: 450px;
}

To

.content-main {
    width: 50%;
    position:absolute;
    left: 450px;
}

This will not only place the sidebar where you want it to be, but also position the element, instead of pushing it sideways, leaving you with more room on the lefthand side of the .content-main

Here's a Fiddle

Hope this helps!

Upvotes: 0

Related Questions