[Solved] h1 aligned right, and I can't move it left

[Max]

Hello!

I can not understand why <h1>Welcome to Our Website!</h1> is aligned right, there are no margins, paddings and positioning, etc. I do not understand why it sticks right. Please, help! It should be on the left.

Full code http://codepen.io/maxwl/pen/MwyxLN
HTML http://codepen.io/maxwl/pen/MwyxLN.html
CSS http://codepen.io/maxwl/pen/MwyxLN.css

[Paulie_D]

It’s because of this

.mainContent {
    float: right;
}

Remove the float.

[Max]

Thanks, but you can not do that. The page layout will be broken. The mainContent should be floated right.

[Max]

I cooked the page layout in accordance with the book “CSS3: The Missing Manual” by David Sawyer McFarland. What have I done wrong? May be I misunderstood something?

[Paulie_D]

What have I done wrong? May be I misunderstood something?

Can’t tell, what is it supposed to look like?

[Max]

Ok, thanks. But are there other solutions?

I did so as McFarland recommends it:

“Avoid setting a width for the main content div. It’s not necessary, since browsers simply expand it to fit the available space. Even if you want a fixed-width design, you don’t need to set a width for the main content div, as you’ll see in the next section”

I try not to set width for the main content.

[Paulie_D]

I’m not going to read a book I don’t have to explain his reasoning…if you float that div it will collapse around it’s content unless you give it an explicit width.

I’d suggest that you check back carefully over all the steps you have taken so far and make sure you haven’t missed something.

[Paulie_D]

Of course, if you change the order of the elements…

http://codepen.io/Paulie-D/pen/LVNvMm

[tomhanson1985]

I tried removing float: right and adding display: inline-block instead to .mainContent. how does that look?

http://codepen.io/tomhanson1985/pen/waGZNw

[Paulie_D]

Looks fine to me, but I’m sure all will be explained further in the book.

[Max]

After I tried to give the div .mainContent a width it caused new problems.

You solution to remove float and add display inline-block looked very good untill I added a new div inside the div .mainFeature right under h1. Please, have a look:

http://codepen.io/maxwl/pen/MwyxLN

[Paulie_D]

You solution to remove float and add display inline-block

Not my solution, yours.

My suggestion was…

I’d suggest that you check back carefully over all the steps you have taken so far and make sure you haven’t missed something.

If you haven’t missed something then you need to either continue reading to make sure this behaviour is explained further.

[Max]

“I’d suggest that you check back carefully over all the steps you have taken so far and make sure you haven’t missed something.”

Thank you. It’s a very good advice. You are very good at css and helped me a lot with my code. Have a nice day!

[Paulie_D]

I can’t be that good…I’m missing something, I’m sure of it.

There is a solution for this, I just can’t find it….assuming that your float:right was suggested by the book.

[Max]

Hi, thanks for time and efforts, the solution is here
https://forums.digitalpoint.com/threads/h1-aligned-right-and-i-cant-move-it-left.2754558/

[Author]

Posts