CODEWITHSUNDEEP
htmlcss
Jolly Brown Doggo
Jolly Brown Doggo

Reputation: 5

Sidebar not positioned properly despite CSS

I run a blog and I was making a new layout for it when I ran into some trouble with the sidebar.

I've tried everything as far as moving the sidebar above the content, changing the position, etc., but to no avail. 

body #sidebar {
    width: 25%;
    margin-top: 15px;
    padding-right: 20px;
    padding-top: 20px;
    padding-left: 30px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    margin-left: 15px;
    float: left;
    clear: both;
    position: relative;    
}
<div id="main">
    <p>Some text</p>
</div>

<div id="sidebar"> 
    <p>Some text</p>
</div>

I feel like it's gotta be something small. What am I missing?

Upvotes: 0

Views: 862

Answers (5)

morganfens
morganfens

Reputation: 166

You should consider nesting your divs within a "wrapper". It's good for consistency and keeping all of your divs where they're supposed to go. Using display inline block and reordering your divs will do what you need, but really having a clear structure for your html and css will save you loads of headaches in the future.

I did a quick example of what I think is more what your trying to achieve based on your link. https://codepen.io/morganfens/pen/gxaQVJ

HTML 

<div id="sidebar"> 
    <p>I'm a sidebar</p>
</div>

<div id="main">
    <p>Main Content Goes Here</p>
</div>

</div>

CSS

#sidebar {
    width: 25%;
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom: 15px;
    display:inline-block;
    text-align: left;
}

#main{
  display:inline-block;
  padding-top:15px;
  padding-bottom:15px;
  width:70%;
  text-align: left;
}

Upvotes: 0

Atif Hassan
Atif Hassan

Reputation: 1112

EDIT: The reason why your code was not working is that the p tag is a block level element. Thus it was occupying the entire width of the screen. (Here red is #main and black is #sidebar)

enter image description here

Also the #sidebar came after your #main. Because of these two reasons, your float: left was not working the way you were expecting it to. This is why you have two ways of solving the problem. You either write #sidebar before #main or you specify display: inline-block in your #main.

enter image description here

Adding a display: inline-block causes the elements to take up only the amount of space required.

Here's the code

  body #sidebar {
    width: 25%;
    margin-top: 15px;
    padding-right: 20px;
    padding-top: 20px;
    padding-left: 30px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    margin-left: 15px;
    float: left;
    clear: both;
    position: relative;
}

#main{
  display: inline-block;
}
<div id = "main">
<p>Main</p>
</div>

<div id = "sidebar"> 
<p>Some text</p>
</div>

Upvotes: 1

Avi
Avi

Reputation: 300

Here is the quick fix, but i am not sure why you are going through huge page of re inventing the wheel.

Are you aware of https://getbootstrap.com and https://startbootstrap.com/ and i think this page already https://blackrockdigital.github.io/startbootstrap-portfolio-item/ have what your are looking for. Look up their licence and use it.

By the way i took the below code from your page source code 

body #sidebar {
    background-color: #fff;
    /*padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 15px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 20px;*/

    border: 1px solid #975FB4;
    width:25%;
    float:left;

    }


body #main {
    /*margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;*/
    padding:10px;
    height: auto;
      width: 75%;
}

<div id = "sidebar"> 
<p>Some text</p>
</div>

<div id = "main">
<p>Some text</p>
</div>

Upvotes: 0

Kasunjith Bimal
Kasunjith Bimal

Reputation: 188

Try This Code. HTML

<body>
<div class="Section">
<div id="sidebar"> 
    <p>Some text</p>
</div>
<div id="main">
    <p>Some text</p>
</div>


</div>

</body>

CSS

#Section{

  width:100%;

}
#main{

  width:75%;
  float:right;
}

#sidebar {
    width: 25%;
    float: left;
    clear: both;
    position: relative;    
}

Upvotes: 0

Ihor Lavs
Ihor Lavs

Reputation: 2463

Your sidebar should be the first and then your div, or use this snippet:

#main {
    width:75%;
    float: right;
}

#sidebar {
    overflow:hidden;
}

Upvotes: 0

Related Questions