my div content wont align left as my css specifies

Question

I am trying to make my content align left within a div... the code is below... I made this work once but lost the code. now I cannot figure it out again.

Html5:

<div class="wrapper materials">
<section id="materials">

Then I make an article tag then I create the article content including h tags, p tags etc. then I close the tags then I close the div

css:

.materials {
    width: 80%;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: left; 
}

The text in the materials wrapper is staying centered but I want it aligned left.

score 0 · Accepted Answer · answered Nov 15 '13 at 05:47

0

First of all you are using materials as a class as well as an id so if you are targeting the element holding materials as id, than you need to use #materials and not .materials

#materials {
    width: 80%;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: left; 
}

Apart from this the only thing possible here is that you might be having some more specific selector which is overriding the block of your CSS, try using

#materials {
   text-align: left;
}

answered Nov 15 '13 at 05:47

Mr. Alien

153,751
34
298
278

I do see one thing here though... I have my div opened within another for a specific design purpose... when I use #materials it makes thing look a little weird... – user2994997 Nov 15 '13 at 05:57
@user2994997 actually both are different, using `#` will select the child element having `id` materials where as `.` will target the parent having class `materials` so you need to know what to use, using `#materials` will take `80%` of it's parent element, which you might not need, also I don't know what you are doing, so it might be vague to explain you without any specific explanation from your side :) – Mr. Alien Nov 15 '13 at 06:01
http://abeautifuldayforyou.net/continuing-education-courses/ethics-for-the-massage-therapist-continuing-education-course/index.html/#course-materials This look except the text within the section should be aligned left – user2994997 Nov 15 '13 at 06:05
@user2994997 I would like to tell you that positions have gone rouge since beginning, floats are not cleared, are you thorough with the basics? also this answer of mine will help you to learn how floats behave and how to clear them http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734 – Mr. Alien Nov 15 '13 at 06:07
lets just say I'm... novice! – user2994997 Nov 15 '13 at 06:08
@user2994997 I got that the way you have your layout drafted :) but no issues, everyone starts at some point, would suggest you to go through basics, especially box model, floats and positioning – Mr. Alien Nov 15 '13 at 06:10

denmch · Answer 2 · 2013-11-15T06:58:07.533

Your class .wrapper has text-align: center. It would be advisable to review and simplify your stylesheet based on case uses. For example, what text do you want centered within elements of class .wrapper? If you specify those cases, then only those elements within the wrapper will be centered.

Alternatively, if you want everything in .wrapper except for .materials to be centered, then specify that as follows:

.wrapper.materials {
    text-align: left;
    width: 80%;
    margin: 0 auto;
}

By combining the two in this way you're telling the browser not to choose one class over the other where they differ, but to treat them as a special, unambiguous case.

my div content wont align left as my css specifies

2 Answers2