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/
Related
I have problems with the following html/css code:
body{
font-size: 3.8em;
color: white;
background-color: black;
color: white;
font-family: Verdana, Geneva, sans-serif;
padding: 0px;
margin: 0px;
}
div{
margin: 0px;
margin-bottom: 1em;
text-align: center;
box-sizing: border-box;
width: 100%;
}
#title,#footer{
background-color: #1e9e40;
font-size: 0.5em;
padding: 0.6em;
}
#footer{
position:absolute;
bottom:0px;
margin-bottom: 0px;
}
#main{
padding: 1.3em;
background-color: #540054;
margin-top: 2.5em;
font-size: 0.65em;
text-align: justify;
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>css problems</title>
</head>
<body>
<div id="title">Title font should be smaller!</div>
<div id="main">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 id="footer">This is the correct font size!</div>
</body>
</html>
When you look at the rendered webpage in the Chrome developer mode with mobile view activated, the #title uses a larger font size than the #footer. I can't explain why. Can you? Here is a screenshot:
Did some checking on your code.
I also tested for different mobile devices in Chrome developer mode, and the same effect was seen. In desktop display, the browser is using the default user agent stylesheet, so there is no apparent issue.
In mobile viewports though, there's scaling applied, based on the specific device. That will have a bearing on elements with relative sizing, such as ems.
Essentially, what's happening on the #footer div is because it has position:absolute, and so doesn't behave like a block-level element. If you were to set the same fixed height to #header, #footer, and no other changes to the code, the font sizing would also be the same for both.
Similarly, if you position the header with position: absolute, the font sizing will be the same as the footer. The font sizing in the #header and #footer divs is being computed off the parent element, which in this case in the <body> element. Since the <body> element is set with a relative unit (em) for the font-size, it is also affected by the user agent default styling for that device. You'll see this if you set the font-size in the <body> element to a fixed-size value, such as px, where the child elements will also be affected, and be sized the same in relation to this value.
As others have mentioned, if you add this tag to the header:
<meta name="viewport" content="width=device-width, initial-scale=1">, you will avoid these sizing issues, since it sets a scale value as a base. I've also added a standards-compliant example below this.
For easier reference, I've also put your supplied code into a runnable snippet:
body {
font-size: 3.8em;
color: white;
background-color: black;
color: white;
font-family: Verdana, Geneva, sans-serif;
padding: 0px;
margin: 0px;
position: relative;
}
div {
margin: 0px;
margin-bottom: 1em;
text-align: center;
box-sizing: border-box;
width: 100%;
}
#title,
#footer {
background-color: #1e9e40;
font-size: 0.5em;
padding: 0.6em;
}
#main {
padding: 1.3em;
background-color: #540054;
margin-top: 2.5em;
font-size: 0.65em;
text-align: justify;
}
#footer {
position: absolute;
bottom: 0px;
margin-bottom: 0px;
}
<div id="title">Title font should be smaller!</div>
<div id="main">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 id="footer">This is the correct font size!</div>
To add to this, ideally, you would build the code semantically, that search engines and screen readers could easily parse. This includes the page title wrapped in a <h1> tag, and body text in <p> tags, such as this:
body {
font-size: 3.8em;
color: white;
background-color: black;
color: white;
font-family: Verdana, Geneva, sans-serif;
padding: 0px;
margin: 0px;
}
div {
margin: 0px;
margin-bottom: 1em;
text-align: center;
box-sizing: border-box;
width: 100%;
}
header,
footer {
background-color: #1e9e40;
padding: 0.6em;
}
header h1 {
font-size: 0.5em;
font-weight: normal;
margin: 0;
}
main {
padding: 1.3em;
background-color: #540054;
margin-top: 2.5em;
font-size: 0.65em;
text-align: justify;
}
footer {
margin-bottom: 0px;
font-size: 0.5em;
}
<header>
<h1>Title font should be smaller!</h1>
</header>
<main>
<p>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.</p>
</main>
<footer>This is the correct font size!</footer>
For reference, the <h1> element is styled to look the footer text, including the same styling. There's a bit more margin around it at times, due to default user-agent styling being applied.
Having reviewed karulos answer again, he is telling you what is happening with your code, but not what is wrong and what is correct.
For what you are trying to achieve and while keeping some of what you have done, this would be proper HTML5 code:
There is no reason to add positioning to the body, header or footer at all. You could also keep the <html> tag like that without defining the xhtml namespace. You should also use <header>, <main>, and <footer> elements instead of <div>.
* {
box-sizing: border-box;
}
body {
font-size: 3.8em;
color: white;
background-color: black;
color: white;
font-family: Verdana, Geneva, sans-serif;
padding: 0px;
margin: 0px;
}
header, footer, main {
margin: 0 0 1em 0;
text-align: center;
width: 100%;
}
header, footer {
background-color: #1e9e40;
font-size: 0.5em;
padding: 0.6em;
}
main {
padding: 1.3em;
background-color: #540054;
margin-top: 2.5em;
font-size: 0.65em;
text-align: justify;
}
footer {
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>Title font has the correct font size</header>
<main>And the rest of the code makes some sense...<br>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.</main>
<footer>This is the correct font size</footer>
</body>
</html>
You should specify different font size for different components or you can change the font size of desired element seperately as shown below
body{
font-size: 3.8em;
color: white;
background-color: black;
color: white;
font-family: Verdana, Geneva, sans-serif;
padding: 0px;
margin: 0px;
}
div{
margin: 0px;
margin-bottom: 1em;
text-align: center;
box-sizing: border-box;
width: 100%;
}
#title,#footer{
background-color: #1e9e40;
font-size: 0.5em;
padding: 0.6em;
}
#title {
font-size: 0.3em;
}
#footer{
//position:absolute;
bottom:0px;
margin-bottom: 0px;
}
#main{
padding: 1.3em;
background-color: #540054;
margin-top: 2.5em;
font-size: 0.65em;
text-align: justify;
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>css problems</title>
</head>
<body>
<div id="title">Title font should be smaller!</div>
<div id="main">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 id="footer">This is the correct font size!</div>
</body>
</html>
Thank you
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>
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 */
}
So, I'm trying out some column code to get three columns lined up perfectly. Unfortunately, when I attempted it, I got the left and right columns floating over the middle column, like so:
http://i.imgur.com/p4ln5Ri.png
This is the css code I used. For reference, #left means the left column, #main the middle, and #right the right column.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3-Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="ThreeColumnProjectCSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><h1>Header</h1></div>
<div>
<div class="column">
<h1>Left</h1>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim veniam</li>
</ul>
</div>
<div class="column">
<h1>Header - Main</h1>
<p>Ullamco laboris nisi sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In reprehenderit in voluptate lorem ipsum dolor sit amet, velit esse cillum dolore. Sunt in culpa ut enim ad minim veniam, consectetur adipisicing elit. In reprehenderit in voluptate qui officia deserunt sed do eiusmod tempor incididunt.</p>
<p>Excepteur sint occaecat duis aute irure dolor sunt in culpa. Quis nostrud exercitation consectetur adipisicing elit. In reprehenderit in voluptate lorem ipsum dolor sit amet, cupidatat non proident. Ut labore et dolore magna aliqua.</p>
<p>Quis nostrud exercitation qui officia deserunt eu fugiat nulla pariatur. Consectetur adipisicing elit, lorem ipsum dolor sit amet, in reprehenderit in voluptate. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Velit esse cillum dolore qui officia deserunt ut labore et dolore magna aliqua.</p>
<p>In reprehenderit in voluptate sunt in culpa. Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Excepteur sint occaecat lorem ipsum dolor sit amet, quis nostrud exercitation.</p>
<p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Ullamco laboris nisi ut enim ad minim veniam, in reprehenderit in voluptate. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, velit esse cillum dolore.</p>
</div>
<div class="column">
<h1>Right</h1>
<p>Sed do eiusmod tempor incididunt excepteur sint occaecat duis aute irure dolor.</p>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
#left {
position: absolute;
left:0px;
top:100px;
width:200px;
background:#fff;
border:1px solid #000;
padding: 0px 5px;
}
#right {
position: absolute;
right:0px;
top:100px;
width:200px;
background:#fff;
border:1px solid #000;
padding: 0px 5px;
}
#header {
background:#fff;
/* IE 5.5 */
height:81px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
/* IE 6 */
height: 99px;
}
html]body #banner {
/* Mozilla and Safari */
height: 99px;
}
#main {
background:#fff;
/* these two margins affect IE 5.5 */
margin-left: 200px;
margin-right:200px;
border:1px solid #000;
padding: 0px 5px;
voice-family: "\"}\"";
voice-family: inherit;
/* these two margins affect IE 6 */
margin-left: 200px;
margin-right:200px;
}
html]body #main {
/* these two margins affect Mozilla and Safari */
margin-left: 212px;
margin-right:212px;
}
#footer {
width: 100%;
height: 35px;
border: solid #000000;
border-width: 1px 0;
margin: 0;
}
I appreciate the help.
I would get rid of the position absolute and use a grid system.
For example: http://jsfiddle.net/C6CnJ/7/
.row { clear: both; }
.column {
width: 130px;
margin: 0 10px 20px;
float: left;
}
<div class="row">
<div class="column">Lorem ipsum...</div>
<div class="column">Lorem ipsum...</div>
<div class="column">Lorem ipsum...</div>
</div>
<div class="row">
<div class="column">Hello!</div>
</div>
CSS beginner here, I'm at my wits end with a relatively simple css layout and was hoping someone would just look over it for me..
What i've got:
CSS embedded temporarily, excuse the indenting (i've just come from programming and indenting was helping me make sense of it):
<!DOCTYPE HTML>
<html lang="en">
<style>
* {margin: 0; padding:0;}
body
{
font: normal 100% Helvetica, Arial, sans-serif;
background-color: LightSkyBlue;
margin: auto auto;
max-width: 90%;
}
#central_container
{
background-color: Yellow;
width: 100%;
margin: auto auto;
float: left;
}
#leftside_container
{
background-color: Ivory;
float: left;
width: 66%;
clear: left;
}
#header_container
{
background-color: DeepSkyBlue;
width: 100%;
height: 15em;
}
#header_title
{
background-color: Lime;
width: 100%;
height: 80%;
}
#header_title h1{ padding: 0; margin: 0; }
#navbar_container
{
background-color: Coral;
width: 100%;
height: 20%;
}
.navbar_links{ background-color: HotPink; }
#currentpage_content
{
background-color: grey;
width: 100%;
height: 20%;
}
#rightside_container
{
background-color: Khaki;
float: right;
width: 33%; <!--/* 320 /960 */-->
}
#register_container
{
background-color: LightPink;
width: 100%;
}
#contacts_content
{
background-color: SeaGreen;
width: 100%;
}
</style>
<head>
<title>Verge Green IT</title>
<link rel="stylesheet" href"CSS/base.css" type="text/css" />
</head>
<body>
<div id="central_container">
<!--Left-side Current-page Content-->
<div id="leftside_container">
<!--Header-->
<div id="header_container">
<div id="header_title">
<h1>#header_title</h1>
</div>
<!--Navbar-->
<div id="navbar_container">
<div class="navbar_links">
</div>
</div>
</div>
<!--Current Page Contents-->
<div id="currentpage_content">
<p> #currentpage_content</p>
<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><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>
</div>
<!--Right-side Every-page Content-->
<div id="rightside_container">
<div id="register_container"><p> #register_container </p></div>
<div id="contacts_content"><p> #contacts_content</p></div>
</div>
</div>
</body>
</html>
What i'm aiming for:
(Vague text alternative: Where the register_container fills the rightside_container up to the height of the bottom of the navbar_container. And the contact_content fills up the rest of the rightside_container as the current_page content does on the leftside_container. )
I think i'm having some trouble because of the floating i'm trying to do.. and i have no idea why there's empty yellow space on the left of register_container/contacts_content. Nor why i can specify height for things like the header_title but not the register_container.
Really appreciate any help!
I think you have some minor problems with values you have given in the Width and height field.
This works fine for me.
<!DOCTYPE HTML>
<html lang="en">
<style>
* {margin: 0; padding:0;}
body
{
font: normal 100% Helvetica, Arial, sans-serif;
background-color: LightSkyBlue;
margin: 0 auto;
max-width: 90%;
height: auto;
}
#central_container
{
background-color: Yellow;
width: 100%;
margin: 0 auto;
height: 100%;
float: left;
}
#leftside_container
{
background-color: Ivory;
float: left;
width: 66%;
clear: left;
}
#header_container
{
background-color: DeepSkyBlue;
width: 100%;
height: 15em;
}
#header_title
{
background-color: Lime;
width: 100%;
height: 80%;
}
#header_title h1{ padding: 0; margin: 0; }
#navbar_container
{
background-color: Coral;
width: 100%;
height: 20%;
}
.navbar_links{ background-color: HotPink; }
#currentpage_content
{
background-color: grey;
width: 100%;
height: 20%;
}
#rightside_container
{
background-color: Khaki;
float: right;
width: 34%; <!--/* 320 /960 */-->
}
#register_container
{
background-color: LightPink;
width: 100%;
height:240px;
}
#contacts_content
{
background-color: SeaGreen;
width: 100%;
height:250px;
}
</style>
<head>
<title>Verge Green IT</title>
<link rel="stylesheet" href"CSS/base.css" type="text/css" />
</head>
<body>
<div id="central_container">
<!--Left-side Current-page Content-->
<div id="leftside_container">
<!--Header-->
<div id="header_container">
<div id="header_title">
<h1>#header_title</h1>
</div>
<!--Navbar-->
<div id="navbar_container">
<div class="navbar_links">
</div>
</div>
</div>
<!--Current Page Contents-->
<div id="currentpage_content">
<p> #currentpage_content</p>
<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><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>
</div>
<!--Right-side Every-page Content-->
<div id="rightside_container">
<div id="register_container"><p> #register_container </p></div>
<div id="contacts_content"><p> #contacts_content</p></div>
</div>
</div>
</body>
</html>