Some Help Need in with in HTML


This is based on this Layout.

What I want is that the "The Main 2 Content" background should extend to the extreme lefts and right.

Like this


I don't see the resemblance.

Do you mean to the very edges of the browser? I can't see the example
Those elements are wrapped in a container with a max-width, you would have to alter that structure.


There is a resemblance(see here), but the page I have posted is the front page.

Try to compare from this then you might understand what I am trying to achieve.


If you just want a strip that goes edge to edge then you can use this trick without changing any other code.

.inner-content .content{
	/* 1200px matches the max-width of the element - it can't be bigger than the element or the shadow moves away */
	box-shadow:        1200px 0px 0px #eee, -1200px 0px 0px #eee;

As mentioned in the code the width of the box-shadow on each side must match the max-width of the layout which in your example was 1200px. That will allow the stripe to fit screens of 3600px which should be enough for everyone. (The shadow width cannot be greater than the layout width or the shadow moves away from the middle section.)


Yes, sir! That's what I wanted.



It worked 100%.



I was trying to create somewhat this kind of situation

I tried to repeat the DIV, but it was breaking the design below it.

however when I repeated the whole structure → I mean this.

Do we need to repeat the whole structure to get more? Actually, that is the only method that currently seems viable to me.

In that case, suppose we have 7 rows in total then we will be repeating too much code.

I was initially thinking that repeating this or this would suffice.

Please advise if the repetition of so much code is not a poor coding practice.


I'm not quite sure what you are asking but the minimum code to do that layout would be this:

(view on codepen to see full width)

Of course it all depends on what happens next or why you saw the need to use flex etc..


This does seem to be a re-occurring theme in the OP's topics. That Flex is used for almost everything regardless of whether it is needed or not, as though its is the one and only go-to tool for every responsive layout.
It is a great tool to have in the tool box, but not the only one. It is browser expensive so should be used sparingly only when its special abilities are required.
A simple stacked layout like this has no need for elaborate css. People need to recognise that 90% of html is fully responsive by default, sans css. When you realise that, RWD gets a whole lot easier, then you can dispel the myths that you need new-fangled tools like flex or heavy frameworks to achieve it in a basic layout.

I think I made this point before.


Means It consumes lots of Internet speed(MB's), and thus slow down the page speed?


No, it should not consume bandwidth, no more than any other code. In the end it is only code that is transmitted, bandwidth it affected by the amount or volume of code, what that code says makes no difference.
Though in some cases you could argue that when extra css is used unnecessarily, where such styling could be omitted altogether it could waste bandwidth.
But what I actually mean is it is expensive on the resources at the client side, in the amount of processing that must be done to render the page layout.


Actually to be honest with you why I am using flex all the times because I am naive, and I am afraid that right now I do not have the Polish to make a good a layout. I am using Mr Paul O'Brien's layout because he is very experienced and when I use something build by him I feel confident that my Layout is highly professional and I move forward with courage and enthusiasm.

Please pardon me If I am appearing foolish, but I am just naive in css/HTML.


For me a lot depends a lot on what you want where in different viewport dimensions. I think if they can flow naturally and still look OK that's a good thing.

When I last experimented with flex I used it so a left sidebar would be left of the content until it got cramped and then display it below the content.


Please check this layout →

this is a very powerful one, and I am in love with it.


Yes that layout needs flex but simpler linear layouts do no need flex so you choose the right tool for the job in hand :slight_smile:

It does take a little experience and practice to know when ans when not to use certain properties so just keep learning:)


there is a lot of vacant space in my HTML.

see this

should we use

display: flex;
justify-content: space-betwee;
flex-wrap: wrap

Otherwise, I guess we have to use too much css, and we have to change too much for different screen resolution.


I'm not sure what you are asking exactly?

You can't automatically stretch a single line of text to reach the end of the available space? That would be silly anyway although you could probably use a hack to justify the text for a single line.

If you mean you just want the thick black border to hug the text then you could do this:


If that's not what you meant then I'll need a drawing mock up to see what you meant :slight_smile:


@PaulOB sir,

Please check this.

This is the HTML:

<div class="flex">
	<div class="one">1</div>
	<div class="two">2</div>
	<div class="three">3</div>
	<div class="four">4</div>

so I was thinking about implementing the above flex method → to this one

I was asking if it is ok because I am told before that I use too much of flex(When not needed and alternatives are available).


I'm a little confused with what you are asking as the 4 new boxes seem unrelated to the question about the check boxes?

If you want to evenly distribute those 4 gray boxes then yes flex is ideal for that.

If you want to do the same with the radio boxes and labels then that would look awkward as the text would need to split to multiple lines in order to fit 4 across.


3 elements in one row. I wish that space between them should be even(and the uncoocupied space of the right should be evenly used).