CODEWITHSUNDEEP
htmlcsscss-float
Neelam Khan
Neelam Khan

Reputation: 1121

How do I left align a div

I would like some help with left aligning the content on the site I am working on. I have a menu on the left hand side and I need a content div to site adjacent to this menu.

In my CSS I currently have the following AND The HTML Looks like this:

    #pageContent_wrapper {
        width:100%;
        
    }
    #container {
        width:940px;
        height:100%;
        margin: 0 auto;
    }

    .page-content {
        float:left;
        padding: 30px 0;
    }
    <div id="pageContent_wrapper">
        <div id="container">
           <div class="page-content">
              <p>Content goes Here</p>
           </div>
        </div>
    </div>

This doesn't work though. Essentially I am trying to left align a div with the main content in it.

Upvotes: 1

Views: 1534

Answers (3)

Neelam Khan
Neelam Khan

Reputation: 1121

Thanks @matewka you are quite right adding position absolute to the container is not a good idea I have had a couple of people say the same thing. So instead what I have done is added a float:left to the container with padding-left:270px which works perfectly! Because it means no matter what the content within my container it will always sit that many pixels away from the menu on the left and the content is left aligned with the float.

I don't think I explained exactly what the problem was when I wrote my question. Thank you for your help though.

Upvotes: 1

Mandip Darji
Mandip Darji

Reputation: 775

add in you css 

 text-align:left

And remove

margin: 0 auto;

waiting for your replay....

Upvotes: 1

matewka
matewka

Reputation: 10148

Remove margin: 0 auto; from the #container.
You also don't need float: left in the .page-content.
Whole CSS should look like this:

#pageContent_wrapper {
    width:100%;
}
#container {
    width:940px;
    height:100%;
}

.page-content {
    padding: 30px 0;
}

Upvotes: 2

Related Questions