I'm trying to create a tabulator system with CSS only. So far it works fine, but the absolute positioning of the content boxes won't allow me to add more divs at the bottom. Is there any way to fix this problem? I know that absolute positioned objects will not normally influence the text flow, but can you still make it happen?
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>CSS Tabs</title>
<link rel="stylesheet" type="text/css" href="menutabs.css" />
</style>
</head>
<body>
<div class="main">
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">One</label>
<div id="tab-content1" class="tab-content animated fadeIn">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Two</label>
<div id="tab-content2" class="tab-content animated fadeIn">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Three</label>
<div id="tab-content3" class="tab-content animated fadeIn">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</li>
</ul>
<div>
<p class="sample">Sample Text</p>
</div>
</div>
</body>
</html>
CSS File:
.main {
width: 80%;
margin: 0px auto;
}
.tabs input[type=radio] {
position: absolute;
visibility: hidden;
}
.tabs {
list-style: none;
position: relative;
padding: 0;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
color: #585;
font-size: 24px;
background: rgba(255,255,255,0.2);
}
.tabs label:hover {
background: rgba(60,90,60,0.2);
}
[id^=tab]:checked + label {
background: #585;
color: white;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
display: none;
background: #585;
padding: 5px;
color: white;
position: absolute;
left: 0;
}
.sample {
background-color: #585;
color: white;
text-align: center;
}
If you know the height of the containing elements you could obviously just set a height on the parent element and avoid the collapsing issues with the absolutely positioned elements. This isn't really ideal though, as it should work with dynamic content.
Using the current coding, this could be solved with a little JavaScript, however if you want to avoid JS, the solution would be to remove the absolute positioning and change the markup.
See it for yourself - Working example
I removed the input/label elements from the li tabs and moved them to the root of the .main element. Instead of floating the li elements, they are now inline-block elements to avoid collapsing issues. Additionally, I wasn't able to use generalized attribute selectors, such as [id^=tab-content], instead I had to change them to specific id selectors. This is a little more redundant, but it is unfortunately required in this instance due to the markup change. This works because there are no longer any absolutely positioned elements.
Updated HTML
<div class="main">
<input type="radio" name="tabs" id="tab1" checked>
<label for="tab1">One</label>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Two</label>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Three</label>
<ul class="tabs">
<li>
<div id="tab-content1" class="tab-content animated fadeIn">TAB1</div>
</li>
<li>
<div id="tab-content2" class="tab-content animated fadeIn">TAB2</div>
</li>
<li>
<div id="tab-content3" class="tab-content animated fadeIn">TAB3</div>
</li>
</ul>
<div>
<p class="sample">Sample Text</p>
</div>
</div>
Updated CSS
.main {
width: 80%;
margin: 0px auto;
}
.tabs {
list-style: none;
position: relative;
padding: 0;
}
.tabs li {
display:inline-block;
}
[id^=tab]:checked + label {
background: #585;
color: white;
}
#tab1:checked ~ .tabs li #tab-content1 {
display: block;
}
#tab2:checked ~ .tabs li #tab-content2 {
display: block;
}
#tab3:checked ~ .tabs li #tab-content3 {
display: block;
}
.tab-content {
display: none;
background: #585;
padding: 5px;
color: white;
}
.sample {
background-color: #585;
color: white;
text-align: center;
}
label {
padding: 10px 20px;
color: #585;
font-size: 24px;
background: rgba(255, 255, 255, 0.2);
float:left;
position:relative;
z-index:1;
}
label:hover {
background: rgba(60, 90, 60, 0.2);
cursor:pointer;
}
input[type=radio] {
display:none;
}
There are 2 issues here.
FIDDLE
First of all the list items in your ul are floated left. This means that the list has no height.
The fix: add a cleafix to the ul.
<ul class="tabs clearfix">
.clearfix:after {
content:"";
display:table;
clear:both;
}
Second: To overcome the absolutely positioned content - just add a margin-top to the div that follow.
Of course - this will only work if you know in advance the height of your content (Thanks #JoshC)
If you don't know the height - then I think you'll just have to redesign your markup. A quick fix would be to add the extra divs to the content itself.
.sample {
background-color: #585;
color: white;
text-align: center;
margin-top: 90px; /* height of content */
}
Related
I have 2 divs, yellow and red. The yellow div has a variable content.
I want to achieve the following:
When the yellow div grows, the red div should be pushed down, but never below the page edge. The red div should always be fully visible.
If the yellow div becomes too large, it should be scrollable, so the red div is still visible.
The yellow div should not take up more space than its content. When the yellow div does not take up much space, the red div should not be pushed down. It should be displayed right below the yellow div.
How can I achieve this with flexbox?
I succeeded in making the yellow box scrollable, and keeping the red box always visible. However, my solution displays the yellow box always at the bottom of the page, which is not what I want.
.page {
height: 120px;
width: 300px;
display: flex;
flex-direction: column;
border: 4px solid gray;
padding: 10px;
}
.yellow {
flex: 1 1 0;
overflow: auto;
min-height: 0;
border: 4px solid #F7B64C;
padding: 10px;
margin-bottom: 10px;
}
.red {
border: 4px solid #F05467;
padding: 10px;
}
Example 1: yellow div has a lot of content and correctly becomes scrollable:
<div class="page">
<div class="yellow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="red"></div>
</div>
<br/>
<br/> Example 2: yellow div has little content, incorrectly pushes red div to the bottom:
<div class="page">
<div class="yellow">
Lorem ipsum dolor sit amet.
</div>
<div class="red"></div>
</div>
How can I make the yellow box take up only the space it actually needs, and not take up the remaining space?
It seems that the default behavior of flex box might achieve the desired result without additional settings.
In the following example, try click the buttons to adjust the amount of content in yellow and red.
An additional spacer div after red can be added to further enforce the layout, but it seems to be unnecessary in this use case.
.spacer {flex: 1}
<div class="spacer"></div>
Example:
const btns = document.querySelectorAll("button");
const yellow = document.querySelector(".yellow");
const red = document.querySelector(".red");
btns.forEach((btn, i) =>
btn.addEventListener("click", () => {
yellow.innerText = i === 0 ? "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." : i === 1 ? "Lorem ipsum dolor sit amet." : yellow.innerText;
red.innerText = i === 2 ? "Duis aute irure dolor in reprehenderit in velit eu fugiat nulla pariatur." : i === 3 ? "" : red.innerText;
})
)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
}
.control {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 300px;
margin: 10px 10px;
gap: 10px;
}
button {
padding: 6px;
}
section {
height: 180px;
width: 300px;
display: flex;
flex-direction: column;
border: 4px solid gray;
padding: 10px;
margin: 3px 10px;
}
.yellow {
overflow: auto;
min-height: 0;
border: 4px solid #f7b64c;
padding: 10px;
margin-bottom: 10px;
}
.red {
border: 4px solid #f05467;
padding: 10px;
}
/* .spacer {
flex: 1;
} */
<div class="control">
<button>Example 1: Lots of content in yellow</button>
<button>Example 2: Little content in yellow</button>
<button>Example 3: Some content in red</button>
<button>Example 4: No content in red</button>
</div>
<br />
<section>
<div class="yellow">Try click buttons to see examples</div>
<div class="red"></div>
<!-- <div class="spacer"></div> -->
</section>
Here is below a simplified version of what I have.
The goal is to fit the image into its parent. In other words, the image size must not exceed the parent size. max-width and max-height don't work because the parent (#media-insert) don't have a known size. What is currently happening, is that the parent increases its size to fit the image.
This is really easy solve by setting the image as the background of the parent instead of inserting it into the parent. However, I don't want to do that, because I want to be able to replace the image by a video.
Also, I don't want to modify the HTML. Keep in mind that this is a simplified version, in the real world there is more going on in the layout.
Thanks
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
#media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
#media-wrapper #media-insert {
width: 100%;
height: 100%;
/* center the image */
display: flex;
align-items: center;
justify-content: center;
}
#media-wrapper #media-insert img {
display: block;
/* image must fit inside the parent (doesn't work) */
max-width: 100%;
max-height: 100%;
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
#media-wrapper {
border: 5px solid green;
}
#media-insert {
border: 5px solid lightgreen;
}
#media-description {
border: 5px solid blue;
}
<main>
<div id="media-wrapper">
<div id="media-insert">
<img src="https://picsum.photos/200/300" alt="lorem ipsum">
</div>
</div>
<div id="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
Edit:
Here is how I want it to look like (but without setting the image as the background of the parent):
* {
box-sizing: border-box;
}
#examples {
display: flex;
}
#examples > div {
margin: 1em
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
.media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
.media-wrapper .media-insert {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
#img-example-1 {
background-image: url("https://picsum.photos/200/300");
}
#img-example-2 {
background-image: url("https://picsum.photos/100/100");
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
.media-wrapper {
border: 5px solid green;
}
.media-insert {
border: 5px solid lightgreen;
}
.media-description {
border: 5px solid blue;
}
<div id="examples">
<div>
<p>
Image too big<br>
-> scale down
</p>
<main>
<div class="media-wrapper">
<div class="media-insert" id="img-example-1"></div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
<div>
<p>
Image smaller than parent<br>
-> image keeps its size
</p>
<main>
<div class="media-wrapper">
<div class="media-insert" id="img-example-2"></div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
</div>
You could position the image with absolute position, set it to 100% width and height and use the object-fit property to style it. It's like the background-size: cover:
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
#media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
#media-wrapper #media-insert {
width: 100%;
height: 100%;
/* center the image */
display: flex;
align-items: center;
justify-content: center;
background:red;
position:relative;
}
#media-wrapper #media-insert img {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
object-fit:cover;
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
#media-wrapper {
border: 5px solid green;
}
#media-insert {
border: 5px solid lightgreen;
}
#media-description {
border: 5px solid blue;
}
<main>
<div id="media-wrapper">
<div id="media-insert">
<img src="https://picsum.photos/200/300" alt="lorem ipsum">
</div>
</div>
<div id="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
Got it! I modified passatgt's answer (thanks for showing me how object-fit works).
The modification I made:
All the image is visible: object-fit: contain instead of object-fit: cover
The image keeps its size if it already fits in the parent (max-width and max-height instead of width and height).
Added an example to show that it works with image bigger than parent and smaller than parent.
* {
box-sizing: border-box;
}
#examples {
display: flex;
}
#examples > div {
margin: 1em
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
.media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
.media-wrapper .media-insert {
position: relative;
width: 100%;
height: 100%;
}
.media-wrapper .media-insert img {
position:absolute;
left: 50%;
top: 50%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform: translate(-50%, -50%);
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
.media-wrapper {
border: 5px solid green;
}
.media-insert {
border: 5px solid lightgreen;
}
.media-description {
border: 5px solid blue;
}
<div id="examples">
<div>
<p>
Image too big<br>
-> scale down
</p>
<main>
<div class="media-wrapper">
<div class="media-insert">
<img src="https://picsum.photos/200/300" alt="lorem ipsum">
</div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
<div>
<p>
Image smaller than parent<br>
-> image keeps its size
</p>
<main>
<div class="media-wrapper">
<div class="media-insert">
<img src="https://picsum.photos/100/100" alt="lorem ipsum">
</div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
</div>
change the max-width and max-height to min
#media-wrapper #media-insert img {
display: block;
min-width: 100%;
min-width: 100%;
}
Edit: or are you trying just to increase the width to fit the parent?
I have two divs side by side inside a wrapper div. In the left column, there is an image with a title above. In the right column, there is a number of links. The links div has some top padding to align text of first link with image in left column. But when screen size changes, the image title over the image inside left column breaks into two lines. When this happens the text on right div is not aligned with the image anymore. I'm lost here as I'm trying to solve this with css. Any ideas?
What I want is to align text in right div with image in left div no matter how many lines it takes to print the tile.
.wrapper
{
width: 90%;
margin: auto;
background: #fff;
display:flex;
}
.col1
{
width: 48%;
background: #ccc;
float: left;
overflow: hidden;
}
img.col1 {
width: 100%;
height: auto;
}
.col2
{
width: 49%;
margin-left: 1em;
background: #000;
float: right;
color:white;
}
.text
{
padding-top: 59px;
}
.yellow {
color: #ccc;
font-weight: 600;
clear:both;
font-family: arial;
}
<div class="main">
<div class="wrapper">
<div class="col1"><h4>Lorem ipsum dolor sit amet consect</h4><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg">
</div>
<div class="col2">
<div class="text">
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
Well if you cannot change the HTML structure one solution would be:
Add a <h4> with the same content to the col2 with the same content as the one from col1. I don;t know if that is feasible for you. Let me know and i can find another solution ( hopefully )
Also, do not use float just take advantage of flexbox
See below
.wrapper {
width: 90%;
margin: auto;
background: #fff;
display: flex;
}
.col1 {
background: #ccc;
overflow: hidden;
}
img.col1 {
width: 100%;
height: auto;
}
.col {
flex: 0 0 calc(50% - 0.5em);
}
.col2 {
background: #000;
color: white;
margin-left: 1em;
}
.col2 h4 {
visibility:hidden;
}
.text {
}
.yellow {
color: #ccc;
font-weight: 600;
clear: both;
font-family: arial;
}
<div class="main">
<div class="wrapper">
<div class="col1 col">
<h4>Lorem ipsum dolor sit amet consect</h4><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg">
</div>
<div class="col2 col">
<div class="text">
<h4>Lorem ipsum dolor sit amet consect</h4>
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
This question already has answers here:
What is a clearfix?
(10 answers)
Closed 4 years ago.
Im making a test web page in html 5 in Sublime text (mac) with css and i've repeatedly checked what the problem is but i can't fix the issue. I want the orange colour to colour only the footer (and header border bottom) but it fills the whole webpage (minus header).
How do I fix this?
Additionally, what mistake did I make?
ps - I have tried colouring the aside and article but that doesn't work since the height of the 2 are different and the footer still colours everything that isn't yet coloured (apart from the body). Also adding a break (br) in the html doesn't work as it adds a break to the colour at the top of the page
heres my code for the html:
<!DOCTYPE html>
<html>
<head>
<title>Task 3b</title>
<link rel="stylesheet" type="text/css" href="../CSS/hwk.css">
</head>
<body>
<header>
<div class="container">
<h1>
<span id="highlight">Main</span> Header
</h1>
<nav>
<p>HOME ABOUT SERVICES</p>
</nav>
</div>
</header>
<article>
<div class="container">
<p class="maintext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</article>
<aside>
<div class="container">
<p class="maintext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</p>
</div>
</aside>
<footer>
<div class="container">
<p>
-- © 2019 | Contact Us<br>
----------
</p>
</div>
</footer>
</body>
</html>
And here is the css:
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
a{
text-decoration: none;
}
body{
background-color: #f3f3f3;
font-family: Arial;
line-height: 1.5em;
margin: 0;
padding: 0;
}
/* header */
header{
background: #35424a;
margin: 0;
padding: 20px;
color: #fff;
text-align: center;
border-bottom: 3px #e8491d solid;
}
header h1{
float: left;
}
header #highlight{
color: #e8491d;
}
header nav{
float: right;
padding-top: 4px;
}
header nav a{
color: #e2e2e2;
font-weight: bold;
}
header nav a:hover{
color: #fff;
}
/* text */
article{
float: left;
width: 65%;
}
aside{
float: right;
width: 35%;
border-left: 1px #a8a8a8 solid;
box-sizing: border-box;
}
footer{
text-align: center;
color: #fff;
background-color: #e8491d;
}
Footer colour (orange) colours whole webpage
Thanks in advance!
You have to make change to footer css as below. Just add clear: both;
footer {
clear: both;
text-align: center;
color: #fff;
background-color: #e8491d;
}
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
a{
text-decoration: none;
}
body{
background-color: #f3f3f3;
font-family: Arial;
line-height: 1.5em;
margin: 0;
padding: 0;
}
/* header */
header{
background: #35424a;
margin: 0;
padding: 20px;
color: #fff;
text-align: center;
border-bottom: 3px #e8491d solid;
}
header h1{
float: left;
}
header #highlight{
color: #e8491d;
}
header nav{
float: right;
padding-top: 4px;
}
header nav a{
color: #e2e2e2;
font-weight: bold;
}
header nav a:hover{
color: #fff;
}
/* text */
article{
float: left;
width: 65%;
}
aside{
float: right;
width: 35%;
border-left: 1px #a8a8a8 solid;
box-sizing: border-box;
}
footer {
clear: both;
text-align: center;
color: #fff;
background-color: #e8491d;
}
<!DOCTYPE html>
<html>
<head>
<title>Task 3b</title>
<link rel="stylesheet" type="text/css" href="../CSS/hwk.css">
</head>
<body>
<header>
<div class="container">
<h1>
<span id="highlight">Main</span> Header
</h1>
<nav>
<p>HOME ABOUT SERVICES</p>
</nav>
</div>
</header>
<article>
<div class="container">
<p class="maintext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</article>
<aside>
<div class="container">
<p class="maintext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</p>
</div>
</aside>
<footer>
<div class="container">
<p>
-- © 2019 | Contact Us<br>
----------
</p>
</div>
</footer>
</body>
</html>
For more reference about clear property refer here =>
What is a clearfix?
Read about it in this article - by Chris Coyer # CSS-Tricks
The issue you are having is that you are positioning the page content using float, thus your footer is actually taking up the space behind the content. Instead of using float to position your body content, I would recommend using flexbox. To read up more on it see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have modified your css and html to use flexbox instead and it resolves the issue you are having.
HTML
<html>
<head>
<title>Task 3b</title>
<link rel="stylesheet" type="text/css" href="../CSS/hwk.css">
</head>
<body>
<header>
<div class="container">
<h1>
<span id="highlight">Main</span> Header
</h1>
<nav>
<p>HOME ABOUT SERVICES</p>
</nav>
</div>
</header>
<div class="content">
<article>
<div class="container">
<p class="maintext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</article>
<aside>
<div class="container">
<p class="maintext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</p>
</div>
</aside>
</div>
<footer>
<div class="container">
<p>
-- © 2019 | Contact Us<br>
----------
</p>
</div>
</footer>
</body>
</html>
CSS
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
a{
text-decoration: none;
}
body{
background-color: #f3f3f3;
font-family: Arial;
line-height: 1.5em;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
flex-direction: column;
}
/* header */
header{
background: #35424a;
margin: 0;
padding: 20px;
color: #fff;
text-align: center;
border-bottom: 3px #e8491d solid;
}
header h1{
float: left;
}
header #highlight{
color: #e8491d;
}
header nav{
float: right;
padding-top: 4px;
}
header nav a{
color: #e2e2e2;
font-weight: bold;
}
header nav a:hover{
color: #fff;
}
/* text */
article{
width: 65%;
background: white;
}
aside{
width: 35%;
border-left: 1px #a8a8a8 solid;
box-sizing: border-box;
}
.content {
display:flex;
flex-direction: row;
}
footer{
text-align: center;
color: #fff;
background-color: #e8491d;
}
Link to working example: https://jsfiddle.net/Matthew_/u2weo0g8/4/
I've got a design I need to complete with 2 columns, the content inside the columns needs to line up with the container that's used across the site.
The issue I've got is on the design the second column has a background colour that stretches to the edge of the viewport.
If you look at the JSfiddle/code below I have a working solution if you uncomment the .col::after code at the bottom, however I was hoping there might be a cleaner more simple way of achieving this?
Cheers
https://jsfiddle.net/qksmpfrv/
html,
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 80px;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.col {
padding: 80px;
position: relative;
width: 50%;
}
.col:last-child {
background: grey;
}
/* .col:last-child::after {
background: grey;
content: '';
position: absolute;
height: 100%;
left: 100%;
top: 0;
width: 500px;
} */
<div class="container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="grid">
<div class="col">
1
</div>
<div class="col">
2
</div>
</div>
</div>
How about moving the grid outside the max-width container and then adding a max-width inside the columns:
Advantages of this approach over an after
will always be the width of the screen no matter how wide the monitor is - the after approach will only cover screens up to 2400px wide (I know not many screens are this big, but sometimes you might want to display your site at a marketing event and those screens may be)
you are not creating an extra 500px box off screen for smaller resolutions (so less rendering time for things like mobile and tablet)
You don't have to use a hack on every column you want to stretch to the edge
It's just nicer and easier to maintain
html,
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 80px;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.col {
position: relative;
width: 50%;
}
.inner {
max-width: 700px;
padding: 80px; /* move padding to inner */
}
.col:first-child .inner {
margin-left: auto; /* push this to the right if no wide enough to fill col */
}
.col:last-child {
background: grey;
}
<div class="container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- move grid outside container -->
<div class="grid">
<div class="col">
<div class="inner">
<!-- add inner containers with max-width of 700px (half of your container) -->
1
</div>
</div>
<div class="col">
<div class="inner">
2
</div>
</div>
</div>