text in index.html is bottom aligned, I want it to be top alined

Question

I have a html file that when renders the text is bottom aligned. When the web-browser is open wide, the whole text is very far from the top as it can been seen here:

Now if I make the web-browser window narrower the text goes up like this:

Here is what I have in the html file:

<div class="post">

        <h1>Title of Sample Work 2</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus id nisl ut suscipit. Nullam vel justo tellus. Suspendisse vehicula rhoncus nunc sed accumsan. In hac habitasse platea dictumst. Mauris vel dolor velit. Phasellus finibus massa mauris, at interdum nisl luctus at. Etiam porttitor, metus non dapibus pretium, orci arcu pretium nulla, eget congue augue libero at lectus. Mauris pretium urna tristique, laoreet enim rhoncus, euismod tortor.</p>

        <p>Integer dolor nibh, blandit et suscipit in, egestas eu diam. Maecenas imperdiet posuere odio, et tempus sapien efficitur et. Aliquam nec augue efficitur, consectetur elit at, efficitur purus. Fusce sem augue, congue ac metus et, molestie tempus velit. Quisque vitae arcu porttitor, porta augue mollis, consectetur magna. Aenean ante orci, sagittis quis vehicula sit amet, finibus in risus. Sed eu elementum urna. Curabitur quis consequat nunc. Sed sollicitudin purus ac leo volutpat, sit amet rhoncus neque malesuada. Phasellus enim ante, ornare non sapien non, mattis sollicitudin lorem. Phasellus suscipit magna felis, sed ullamcorper tellus molestie ut. Phasellus tincidunt fringilla imperdiet. Fusce rhoncus ultrices sapien, vitae dignissim nunc tincidunt in.</p>

and here is what I have in the css:

.post {
    margin-top: 5em;
    margin-left: 2em;
    margin-right: 2em;
}

.post p{
    max-width: 1200px;
    padding: .5em;
    text-align: justify;
    margin: 0;
    top: 1.25em;
}

.post h1{
    text-align: center;
}

I tried to add position: absolute; to .post{ like this:

.post {
    margin-top: 5em;
    margin-left: 2em;
    margin-right: 2em;
    position: absolute;
}

but then it messes up left and right margins as it can be seen here:

As can be seen the right margin now is much smaller than left margin.

Any suggestion on how I align the text to the top without messing up left and right margin is really appreciated.

It's hard for us to answer this question for you without seeing more of your CSS. Please post additional HTML / CSS to help up narrow down the source of this problem for you. — Dan Truitt, Jul 07 '17 at 01:27
@Mindless No, I didn't do it on purpose, I do not know why it is bottom aligned. — TJ1, Jul 07 '17 at 01:29
@TJ1 i tried to replicate the problem with the css you provided, there got to be more css related to the post. apart from margin-top: 5em, i don't see a reason why it's bottom aligned. — Mindless, Jul 07 '17 at 01:34
@TJ1 do you have a live page where we can actually inspect the css, will be much easier — Mindless, Jul 07 '17 at 01:36
@Mindless actually I do, please take a look at: http://www.nanogomo.com/sample1.html — TJ1, Jul 07 '17 at 01:41
inside css #home-back { ... }, remove position:absolute, the reason is because you set a absolute position on the menu bar, and it creates this illusion your post is bottom aligned, but it is actually your menu bar top aligned — Mindless, Jul 07 '17 at 01:48
@Mindless if I do that it will mess up the home and back button locations and places them on top of each other. — TJ1, Jul 07 '17 at 02:11
The menu layout from the link you sent is different to the menu layout in the question, did you make any modification to it or is there more css related to the layout? — Mindless, Jul 07 '17 at 02:24
You can see the website and it has the same issue. So if you can solve it for the website link I mentioned above that would be fine too. — TJ1, Jul 07 '17 at 03:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148566/discussion-between-mindless-and-tj1). — Mindless, Jul 07 '17 at 04:39

score 0 · Answer 1 · answered Jul 07 '17 at 01:27

0

You could use a meadia query to set the margin based on the width of the screen. https://www.w3schools.com/css/css_rwd_mediaqueries.asp

answered Jul 07 '17 at 01:27

JustoShow

94
1
4

terryeah · Answer 2 · 2017-07-07T03:41:04.897

-1

Delete margin-top: 5em; from .post if you don't want the space on top

Delete max-width: 1200px; from .post p for the even sides

.post {
    margin-left: 2em;
    margin-right: 2em;
    text-align: center;
}

.post p {
    padding: .5em;
    margin: 0;
    text-align: justify;
    top: 1.25em;
}

.post h1{
    text-align: center;
}

<div class="post">     
    <h1>Title of Sample Work 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus id nisl ut suscipit. Nullam vel justo tellus. Suspendisse vehicula rhoncus nunc sed accumsan. In hac habitasse platea dictumst. Mauris vel dolor velit. Phasellus finibus massa mauris, at interdum nisl luctus at. Etiam porttitor, metus non dapibus pretium, orci arcu pretium nulla, eget congue augue libero at lectus. Mauris pretium urna tristique, laoreet enim rhoncus, euismod tortor.</p>
    <p>Integer dolor nibh, blandit et suscipit in, egestas eu diam. Maecenas imperdiet posuere odio, et tempus sapien efficitur et. Aliquam nec augue efficitur, consectetur elit at, efficitur purus. Fusce sem augue, congue ac metus et, molestie tempus velit. Quisque vitae arcu porttitor, porta augue mollis, consectetur magna. Aenean ante orci, sagittis quis vehicula sit amet, finibus in risus. Sed eu elementum urna. Curabitur quis consequat nunc. Sed sollicitudin purus ac leo volutpat, sit amet rhoncus neque malesuada. Phasellus enim ante, ornare non sapien non, mattis sollicitudin lorem. Phasellus suscipit magna felis, sed ullamcorper tellus molestie ut. Phasellus tincidunt fringilla imperdiet. Fusce rhoncus ultrices sapien, vitae dignissim nunc tincidunt in.</p>
</div>

jsfiddle.net/julysfx/sj3q65kn/1/

edited Jul 07 '17 at 03:41

answered Jul 07 '17 at 02:00

terryeah

583
5
17

Leaving `position: absolute;` there messes up left and right margin as it can be seen from running code snippet. – TJ1 Jul 07 '17 at 02:13
@TJ1 Edited, thanks. I have a feeling this with the current changes is what he wants now. – terryeah Jul 07 '17 at 02:32
Even for your snippet if you run you see left margin is larger than right. – TJ1 Jul 07 '17 at 03:27
I don't see how left margin is larger than right for you. [link 1](http://i.imgur.com/EfV0ksl.png) [link 2](http://i.imgur.com/vasAaRe.png) – terryeah Jul 07 '17 at 03:32
Unless I add `position: absolute;` the text is bottom aligned. – TJ1 Jul 07 '17 at 03:39
Have a look at my jsfiddle, I removed `position: absolute;` and the text isn't bottom aligned. [Image] (http://i.imgur.com/CBvMh2h.png) the text isn't bottom aligned in the image, is it? – terryeah Jul 07 '17 at 03:44
It is not in your image, but again I did exactly what you said and mine is bottom aligned. – TJ1 Jul 07 '17 at 03:56
That was straight from my jsfiddle so it has to be something else that's pulling the text down maybe from other css file(s) if you have that you didn't mention in your post. Nothing wrong with what I said and I don't know why it was downvoted. – terryeah Jul 07 '17 at 03:59

score -2 · Answer 3 · answered Jul 07 '17 at 01:33

-2

Try to use px instead of em in the margin attribute

answered Jul 07 '17 at 01:33

Mohamed Shaaban

22
1

text in index.html is bottom aligned, I want it to be top alined

3 Answers3