Some beginner questions on css

Hi All
I am doing some css for a project (I am a web developer/devops enginer, used to do css 15 years ago!). There’s a couple of things I am struggling to get correct:

  1. I want to implement a full width bar at the top of the page, like on this forum. I have this css:
#top {
    width: 100%;
    background-color: black;
    height: 10px;
    margin: 0px;
    padding: 0px;
    top: 0px;
    position:relative;
    display:block;
}

However the bar starts from the utmost right but falls a bit short from the utmost left. The bar also does not start from the utmost top.

  1. What do I need to do to ensure that text does not overflow from my div? I don’t want scrollbars so just make the div wider/taller.

  2. I have a div structure like this:

<div>
 <div>
 <div
<div

(Closing tags omitted for brevity).

What’s the general concept for placing the two inner divs side-by-side left and right?

Hi @gurdipsira. Welcome to the forums. :slight_smile:

It’s best to post a full code example, as detailed here. Otherwise it’s hard to be sure what’s going on in your situation.

2 Likes

That’s probably caused by the browser default margin (usually 8px) applied to the body element. Usually dealt with by a reset rule, e.g:

html, body {
  margin: 0;
  padding: 0;
}

That could be done in many different ways depending of context, so you need to be more specific even for a general advice. Or I would have to guess what scenario you are thinking of.

When I need to check such I usually visit Mozilla Dev for all levels of info:

They also have very useful references for HTML and CSS:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

That’s a good start, there are too many resources to list in one post. :slightly_smiling_face:

1 Like

Ok so I fixed the banner issue, with this css:

    background: #979799;
    font-family: Designio;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    height: 60px;
    background-size: 100%;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.25);

My other question is with list items. So I have this now appearing on two per line, with this css:

/*ul {
    font-size: 11px;
    font-family: Arial;
}

li {
    float: left;
    font-size: 11px;
    font-family: Arial;
    margin: 1px;
    padding: 1px;
}*/

How should this code be modified so that I can fit as many list items on a line as the div allows? See screenshot for what I am trying to achieve.

RE question no2, I am not sure on this. Do I specify a fixed size and configure the div to stretch to fit content?

Lastly, what’s the best way to align two divs left and right? See screenshot. I have achieved this but probably not the best way! I ask as this is fundamental to the appearance of the page.

edit: can’t post a second screenshot as I am a new member.

It seems already do that, though the ul has its defaults in place making the left space in the screenshot. The items are shrink-wrapped to its content by the float. The div could be auto-width to expand in available space.

ul {
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-family: Arial;
}

li {
  float: left;
  margin: 1px;
  padding: 1px;
}

Again, the best way is to know the context. :wink:

A modern way to put them side by side is by using CSS Flexbox or CSS Grid methods of laying out a page.

Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

2 Likes

It’s unlikely that position absolute will be your friend here as it removes the element from the flow and is unlikely to be what you want.

The correct answer was the one Erik gave about removing the default body margins and that will automatically allow the header to be full width without the need for positioning.

You should also lose the fixed height as that will not allow text to wrap or to grow with zoom. Use a min-height if you want an initial space but generally the content in that element will provide the height it needs to grow and shrink as required.

Though if you post the code that generates that display we could see what the screenshot would look like. A screenshot can’t show the code behind it.

An old developer proverb: Code says more than a thousand screenshots. :slightly_smiling_face:

OTOH: An image shows more than a thousand words when it comes to describe what display you want.

Hi,

Thanks for the help. :slight_smile:
So I have everything fixed. Few more issues and then I think I will be good to go! :slight_smile:

  1. I am using this code for aligning two columns:
.column {
  float: left;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left {
  width: 25%;
}

.right {
  width: 75%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

My header looks like this:

header {
    background: #19659F;
    font-family: Designio;
    position: absolute;
    left: 0;
    right: 0;
    background-color: #19659F;
    height: 60px;
    padding: 10px;
    background-size: 100%;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.25);
}

The other issue is I have a div with this css:

.chosenproducts {

    border-bottom: 1px solid black;
}

I see the text in the div I have entered clearly, but no underline.

Lastly, I have a div nested in another, and I want to lay these out left and right. Where I am getting confused is if I reuse the same css, as that’s what I use for the main columns. This is the div structure:

        <div class="testimonials">

            <h2>Garage Details</h2>


            <div id="column2">ssefdfd</div>
            <div id="column2">fddfdfd</div>
        </div>

And the css:

.testimonials {

    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.25);
    border-radius: 1px;
    background-color: white;
    height: 400px;
    margin: 30px;
    padding: 10px;
}

Once I solve these, everything will be good! :slight_smile:

Thanks again for the help guys!

Also , what’s the best book for learning css? I need to get my knowledge up to 2019 as a lot has changed!

Image for the first issue:

header2

I am going to stick with your first issue as, if I understand your question, I don’t think you have received the correct answer.

You wrote “I want to implement a full width bar at the top of the page, like on this forum.” I am seeing a black bar fixed to the top of the screen (it does not scroll with the page) when I look at this forum. If this is what you want, position:absolute; does not resolve your issue as an absolutely positioned bar will scroll with the page. [Perhaps you don’t yet have enough page content to see this is the case.]

The solution to the issue of creating a fixed bar such as the one at the top of the Sitepoint Community pages is very similar to the code you initially proposed, with one particular change:

#top {
    width: 100%;
    background-color: black;
    height: 10px;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px; /* perhaps not necessary, but included for completeness */
    position: fixed; /* this is the declaration that is different */
    display: block; /* if #top is a block element such as a nav or div, display:block; is unnecessary */
}

When you set a value of zero as you do in margin, padding, top, (and left – that I added), best practice is to declare a “0” without a unit. If you run your code through a CSS validator, the validator will give you a warning or error message when you declare zero units, though in practice the page will render fine.

Your issue with .chosenproducts {} is most likely a typo on your part. I’d need to see the complete code to advise further.

To your last issue about laying out

 <div id="column2">ssefdfd</div>
 <div id="column2">fddfdfd</div>

side by side:

First, you reuse an ID, which is absolutely not permitted. But I’m guessing that is a typo in your question at Sitepoint and the actual code is

 <div id="column1">ssefdfd</div>
 <div id="column2">fddfdfd</div>

so I will answer as though the latter is the case.

A div is a block element by default. Block elements stack vertically no matter how wide you make them. The width of .testimonials is not relevant (as long as .testimonials is wide enough to hold both column IDs side by side.

There are several ways to make block elements appear side by side. The two ways you would have learned 15 years ago are:

  1. Change the value of the display property from block to inline-block;
#column1, #column2 {
    display: inline-block;
    width: ;  /* use any value less than half the width of .testimonials, allowing for padding */
}
  1. Float the columns
#column1, #column2 {
    float: left;  /* float; right will work but column1 will show up to the right of column 2 */
    width: ;  /* use any value less than half the width of .testimonials, allowing for padding */
}
     
.testimonials {
    overflow: auto;  /* this declaration should be added to your .testimonials rules */
}

The tricky thing with floats here is that the container must be able to accept floated content. If you float the container itself, that will work but may create issues between the container and its container. If you set the overflow property of the container, it then is able to accept floated content within.

These two methods were the way to go until about 3 to 5 years ago. The modern methods today are to use display: flex AKA “Flexbox” or display: grid; AKA “CSS Grid”.

The solution in flexbox looks like this:

.testimonials {
    display: flex;
    flex-flow: wrap;
    align-content: flex-start;
}

h2 {
    width: 100%;

}
#column1, #column2 {
     width: ;  /* use any value less than half the width of .testimonials, allowing for padding */
}

I realize this looks more difficult, but flexbox is so much more powerful than the older systems it is well worth learning.

Thanks for the help dmittlern

I tried your suggestion but that has completely changed the layout of the page in that divs are over over other divs etc.

Is that potentially because the parent div (left column) does not use a flexbox?

If you are talking about the fixed header then yes it will sit on top of other content because it is removed from the flow as I mentioned in my first post about absolute elements.

If indeed you do want a fixed header then it is better these days to use position sticky as it will avoid initial overlap issues.

Let us know if you do want a header that doesn’t scroll with the document and I will provide some more solid code than already offered.

I would also avoid floats these days for your other issues and use the Flexbox approach.

I’ll offer some code for the header when I get back to my computer later today as only on a mobile at the moment :slight_smile:

3 Likes

I was avoiding flexbox due to IE10 not supporting it.

So if I use it, I can use css from an online generator like this:

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  align-items: auto;
  align-content: start
}
.item {
  flex: 0 0 auto;
  margin: 10px;
}

I would assume this should not break the header.

And for child divs, should they follow any conventions to work seamlessly with a flexbox method?

The two columns will have child divs with margin/padding and border shadows etc. And there will be the requirement of two divs sitting side by side.

Also, open to any suggestions about good books to learn css! It takes so much skill.

IE10 is pretty much dead and I would think there are more users using older versions than IE10 as it was an interim browser. The furthest I go back these days is IE11 as all the older browsers are ta security risk. Soon MS will be switching to a webkit based browser anyway and IE/Edge will be resigned to history.

However IE10 does understand some flexbox so you would need to test in IE10 if you really need to support it. You can supply fallbacks using display:inline-block to get some sort of columns but in most cases just letting the browsers fall back to normal stacked content is good enough for me :slight_smile:

Don’t use generators unless you understand all the code they gave you. There is a lot of redundant and unnecessary code in that snippet that will just confuse you. If you want to learn flexbox there are hundreds of video resources around the web or simply work your way through articles like this one.

Regarding your code so far it is difficult to follow with all the different snippets and would be better if you could package it all into a codepen so we can see what you have and what we have to work width.

I have implemented a sticky header (a header that won’t scroll with the document) and shown 2 examples of code that I think you are looking for. You can find it all here in the codepen.


(Click “Edit on Codepen” to see it properly as I haven’t implemented small screen media queries in the demo).

Set yourself up with a free codepen account and then fork my example to play around with it. Try to understand what it does and then look up anything you don’t know. If you are still stuck or the design isn’t what you meant then please put up your codepen showing what you have so far and what it is you need in more detail.

1 Like

Good first post and welcome to the forums:)

I think you may be right in that the OP wanted a fixed positioned header as I didn’t notice the comment “like on this forum” :slight_smile:

I would like to clarify/correct a couple of comments in your code just to be clear as they may mislead a beginner slightly.

left: 0px; /* perhaps not necessary, but included for completeness */

Actually the left:0 is very important because as Erik and I mentioned the default margins on the body had not been addressed so without left:0 your fixed header will start at 8px (the default margins on the body) from the left and disappear another 8px off the right of the screen (due to the 100% width) where whatever content is there will never be seen :slight_smile:

With left:0 the left position is not auto positioned and lies on to of the body’s margins. It’s a minor point but auto positioned absolute elements (of which fixed position is a subset) will start at the position they would have been in the flow of the document had the element not been positioned. Therefore without left:0 the header would have started at 8px from the left and over-run the width of the viewport as mentioned.

display: block; /* if #top is a block element such as a nav or div, display:block; is unnecessary */

This is unnecessary because even inline elements (like a span etc.) that are positioned absolutely are automatically given a block display anyway so you don’t need to describe them as such.

You can read the details from the specs here. Again its a minor point but something a lot of people don’t realize :slight_smile:

4 Likes

Ok so I have everything working as expected.

I line up my elements using inline-block so that two divs are level, great.

The only issue I have now is that the div that should be in the right column is appearing below on the left hand side (see screenshot).

My css code:.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: auto;
align-content: start
}

.item {
flex: 1 1 auto;
margin: 14px;
margin-top: 40px;
width: 50%;

}

.generalContent {
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.25);
margin: 10px;
margin-top: 100px;
padding: 10px;
width: 50%;
}

What I want is the same width boxes but side-by-side, which I am not far from.

I use inline-block to align content along side each other which works fine.

I have another question: this is a dynamic web application so content will be dynamically inserted, so I won’t always have control over this. Should I use percentages for widths and heights throughout? Basically, if there’s too much content, I always want the divs to stretch. This is the point of flexbox right?

There is no inline block in the code you posted. It seems to have Flexbox thrown at it indiscriminately. You do not show the html either so will be difficult to help.

Inline block will not achieve what you want and you almost never want to give heights to containers that hold fluid content like text.

Flexbox will match container height automatically if set up correctly.

You are giving your boxes 50% with and padding and margins which mean they will be too wide to fit 2 of them on one line! You must account for padding and margins in your calculations. Use the border-box model to make life easier (refer to my codepen).

Please post full demos when you want help as I suggested in my post where I provided a codepen for you with a working example. Codepen or similar is the best way to get help quickly.

Don’t use heights just let the content stretch and they will match height automatically if you remove the erroneous rules I mentioned in my previous post (the align rules). Look at my codepen as an example and increase the content in the three across elements and you will see they all match height automatically. :slight_smile:

1 Like

Replying to #19.

Thank you. I missed the 8px default margins in body. And I agree the value should be stated as “left:0” rather than “left:0px”.

I hadn’t realized that absolutely positioned items are given a block display. So I learned something new here today.

1 Like