2013-10-09 11 views
0

Мне нужна помощь при выравнивании по левому краю содержимого на сайте, над которым я работаю. У меня есть меню слева, и мне нужен контент div на сайт, расположенный рядом с этим меню.Как я могу выровнять div div

В моей CSS я в настоящее время следующие:

#pageContent_wrapper { 
    width:100%; 

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

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

HTML, выглядит следующим образом:

<div id="pageContent_wrapper"> 
    <div id="container"> 
     <div class="page-content"> 
      <p>Content goes Here</p> 
     </div> 
    </div> 
</div> 

Это не работает, хотя. По сути, я пытаюсь выровнять div с основным содержимым в нем.

+0

Какая часть всего этого не работает? –

+0

У вас уже есть выравнивание слева. Ваш '# container' имеет' width: 940px' и 'margin: 0 auto;' (и так будет иметь маржу на больших экранах), это то, что вы подразумеваете под «выравниванием по левому краю» – MLeFevre

+0

Содержимое уже выровнено по левому краю , Проверьте jsFiddle Harshad

ответ

1

Удалить margin: 0 auto; из #container.
Вам также не нужно float: left в .page-content.
Весь CSS должен выглядеть следующим образом:

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

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

Спасибо @matewka Я изменил свой css и вместо этого использовал абсолютное позиционирование. То, что я не упомянул в своем вопросе, состоит в том, что у меня есть фиксированное положение меню слева. Я оставил выровненное основное содержимое ниже CSS: '.page-content { \t \t позиция: абсолютная; \t верх: 50px; \t левый: 15%; } ' –

+0

Добавление' position: absolute' в значительную часть сайта может быть опасным. Я не рекомендую это, и многие согласятся со мной.Вместо этого попробуйте добавить 'margin-left: ..px' в' # container' (или в '.page-content' - denpending, на каком уровне находится меню). В пунктирной части помещают фактическую ширину фиксированного меню. – matewka

0

добавить в вас Css

text-align:left 

И удалить

margin: 0 auto; 

ждет вашего повторе ....

+0

Текст уже выровнен по левому краю. Я хотел, чтобы он выглядел так, как будто фактическое содержимое выравнивается по левому краю, но с тех пор я добавил код ниже:' .page-content {position: absolute; топ: 50px; слева: 15%; } 'Это отсортировало это для меня. –

+0

gr8 ..... @ NeelamKhan .... –

0

Благодаря @matewka вы совершенно правы, добавив позиции абсолютного в контейнер не является хорошей идеей, я имел несколько человек говорят то же самое. Поэтому вместо того, что я сделал, добавлен float:left в контейнер с padding-left:270px, который отлично работает! Потому что это означает, что независимо от содержимого содержимого моего контейнера он всегда будет сидеть на расстоянии нескольких пикселей от меню слева, а содержимое выравнивается с поплавком.

Я не думаю, что я точно объяснил, в чем проблема, когда я написал свой вопрос. Спасибо за вашу помощь.

Смежные вопросы