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?
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…
Cheers!
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.
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!!!
Now i will check what the difference is between the codes so i can see what I’ve done wrong, thanks!!! <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.
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.
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).
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.
The reason for float is because my teachers specify we need to use it.
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.
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?
Or give me the element to use so i can look it up
Cheers!
^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.
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.
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…
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.
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.
