Basic CSS - Layout?

I had to link to 3/4 screenshots, i was only allowed to upload 1 per thread as a new user


I’m having an assignment from my education, and i’m struggling with the layout (so far 3 weeks in to HTML & CSS please be nice).

We we’re given a image on how the website layout should look like, and it should look like this

I edited this thread because i figured out many of the things i was asking about, but now i have another problem as you can see bellow.

My questions are.

  1. Why is my footer at the top right corner? (Grey)
  2. Why is not my orange block bellow the header to the right of the red area? I have it on float left…

Thanks in advance.

Upload your code in codepen , these pictures are not clear


To answere your questions
1: i cannot answere no one can here. Try uploading you code to codepen
2: according to w3schools The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
In its simplest use, the float property can be used to wrap text around images.
now we know that you can decide for yourself if it is ussefull for your site our not.
3: what excatly? what is them?

Hello, i did not even know what codepen was, googled it at it looks like an amazing tool, here you go.

I added body in CSS now, telling the background to be #eee, also i changed all the others background colors to white. How ever, i kept ONLY footer as orange, but yet all my text gets orange, i do not understand why…


I’ve solved a lot of the problems on my own, but now i have a new problem, i will update the thread right away.


Took a walk and i think a bit more clearer now, i think im trying to solve a problem that is not there, because of course these blocks should not have all different colors in the assignment, i just did this for me to see clearly what happens when fooling around with different paddings etc.

Cheers! :slight_smile:

you can check this :point_up_2:

I just updated the thread, and saw you post this right away, this seems like it would solve everything if i could understand, thanks A LOT for your time!!! :slight_smile:

Now i will check what the difference is between the codes so i can see what I’ve done wrong, thanks!!! :slight_smile: <3


Unless you were specifically asked to use floats for this, I would not suggest using floats. Look into flexbox and CSS Grid.

Having said that, a few pointers.

  1. You need to clear the #wrapper container. You can use a clearfix class and give the container that class. Or a bit faster but not as good of a choice you can use overflow: hidden; on the container.

  2. You need to clear the footer, you can use clear: both; on it (or clear: the float direction of the sibling element, in this case, right or left).

  3. The margin on .maincontent will prevent the two elements from sitting side by side. You can account for the margin in the width of the element(s). Just remember margin: 2px; is 4px in total left/right so you need to subtract 4px from the width.

1 Like

Hi! Thanks for your answer.

The reason for float is because my teachers specify we need to use it. :slight_smile:

I was going to ask why the footer jumps up after i added text in Main section, but after i added “clear: both;” in footer in CSS it jumped right back down. :slight_smile:

I would like to ask also, how can i make a boarder around my page? I had a wrapper that makes it 960px, but how can i make a thinline surronding it? :slight_smile:

Or give me the element to use so i can look it up :slight_smile:

Ditch margin: 2px; in #maincontent and you’ll get layout as in image you posted:

^The elements should still be cleared. The container to avoid collapsing and the footer to not take up space behind the two elements (you can see it is behind the two main elements if you make them smaller so there is a gap between them).

You can add an outline to all elements on the page. It can help visualize the boxes.

* {
  outline: orange solid 2px;

Or if you just want a border around the wrapper you can add that, using border or outline.

#wrapper {
  border: 2px solid orange;

If you really need your paras in equal partition, try grid using bootstrap, it uses 12 partitons so, write col-md-4 with all your paras

Hello, thanks for you answer, and sorry for my late reply. I got really excited because i got most of it too work!

This is what i got so far! :slight_smile:

I do have another question however, I am told to only use 1 "h1"tag per page, so in my header, what exactly do i use for the text inside of that? Do i just make it a P with an ID and customize it as i want or what is the solotion? Or where can i read more about it?

Please note i am not copy and pasting people answers here, I’m looking at all up, because im here to learn, not to just “finish” class.

Thanks! :slight_smile:

I’m quite lost here, i was told to add a code in the top of my CSS to aviod having to think about pixel ±, If i added this, it would count it in automaticly, but it seems like it failed somehow?

You added extra space, a margin, between elements, hence they can’t be side by side if margin and width of element surpasses width of window. Better way of achieving what you want is to use css grid. Read all three sections on css grid: intro, container and item. It’s lot easier then doing it as you intended…

You can read up a bit on semantic HTML.

I assume you are talking about box-sizing: border-box; here. It only deals with border and padding, not margin. It has to do with how the element box width/height is calculated.

MDN: box-sizing

  • content-box gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.

  • border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

You can read more about the box model as well.

Thanks!! I’m reading more about Semantic HTML now. And i though border-box were for margin too, but now i know, really appreciated, thanks!! :slight_smile:

A website is mainly divided into headers, menus, content and a footer. Here is the layout of a website

Yeah, that looks really nice!

Should those content on the sides always have “aside” ? Or can they be Sections? :slight_smile: