Quick update. I have not made any changes to my CSS in 7 years.
I need a bit of help adding one feature.
The current CSS has color boxes divided into two columns per page.
I would like to add the exact same thing except I would like it to take the entire width of the page instead of just two columns.
I can paste the CSS here and screen shot of what I need if anyone can help.
Thanks,
I think we will need to see your present code to offer any meaningful assistance.
Hi,
Not a problem, it’s just been a bit and was not sure how active the site would be.
Any special place you want me to put the code or is here okay?
Thanks.
Just paste your relevant code in your post using the code blocks from the editor.
Or a link to the site in question if online.
The picture below shows what I have.
The blue boxes is the code I will supply.
I simply want to duplicate those boxes as a single box with the same everything except width.
I want to place a new box above the two to look the same except take the same width as the two boxes below combined. This way there is a wide box on top and the two narrow below. Kind of like merging cells in a spread sheet.
Thanks.
type or paste code here
````html {
box-sizing:border-box;
}
*, *::before, *::after {
box-sizing:inherit;
}
.outer {
width:80%;
margin:0 auto;
}
.articles {
outline:1px dashed #000; /* TEST Outline. To Be DELETED. */
padding-bottom:8px;
margin:4px -8px; /* see NOTE in comment marks at top of page */
}
[class^="row"] {
width:100%;
display:table;
table-layout:fixed;
border-spacing:8px 0;
padding:8px 0 0;
}
.tcell {
display:table-cell;
border:4px solid #5c759f;
padding:4px;
}
.row2 .tcell {background-color:#f0c880;} /* TEST backgkround-color. To Be DELETED. */
.row3 .tcell {background-color:#def;} /* TEST backgkround-color. To Be DELETED. */
@media screen and (max-width:700px) {
.row2 {
display:block;
width:auto;
padding:0;
}
.row2 .tcell {
display:block;
width:auto;
margin:8px 8px 0;
}
}
@media screen and (max-width:1000px) {
.row3 {
display:block;
width:auto;
padding:0;
}
.row3 .tcell {
display:block;
width:auto;
margin:8px 8px 0;
}
}`To get this:
I inserted this HTML:
<p style="border: 4px solid red; margin: 0 8px; padding:4px;">Inserted box</p>
. . . . but don’t use inline CSS like that 
.
That’s why I want to add the proper code to my css sheet.
I want the box to mimic the individual boxes below with same content style.
Basically the top box will include similer information but for all of the new local stuff opening.
The reason for it to go in style sheet is for easy changes to same element on several pages.
The included css only related to that element. I have an entire sheet dedicated to the site.
This is a perfect use case for flex. No magic numbers, no guess work. Give it the content and let the browser figure it out.
I will give that a try. As stated in have not done much with CSS for a few years. I should have some time in a couple of days to play with it.
Thanks.
Well its all done, More easily than my brain was making it out to be, No flex Box, nothing fancy. Just a darn class added to the div element did the trick.
This is all I had to add and it works on Chrome, Edge and Firefox. Who cares if it works on odd ball browsers but it should because it is nothing special.
.solid {border-style: solid;
border-color: #5c759f;
border-width: 4px;
margin-left: 8px;
margin-right: 8px;
padding-bottom:6px;
padding-top:4px;
padding-left:4px;
Thanks to everyone who jumped in. It lit a fire under my you know what.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
