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
Related
I want to create a fixed height card with a title, body, and footer. The title and footer can be one or more lines, and the body text should expand to fill the remaining space.
.card {
display: flex;
flex-direction: column;
height: 192px;
width: 300px;
border: 1px solid;
padding: 12px;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.body {
flex: 1 1 auto;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
margin-bottom: 8px;
}
<div class="card">
<div class="title">
This is a title
</div>
<div class="body">
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>
footer text
</div>
</div>
How can I prevent the body text from being cut off? overflow-wrap/word-wrap seem to have no effect.
You have to make the height a mutliple of the height of one line. Here is an example using CSS grid.
Resize the main container to see the magic:
.card {
display: flex;
flex-direction: column;
height: 192px;
width: 300px;
border: 1px solid;
padding: 12px;
overflow: hidden;
resize: both;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.body {
flex: 1 1 auto;
margin-bottom: 8px;
line-height: 1.2em; /* height of one line */
display: grid;
grid-template-rows: repeat(auto-fit, 1.2em); /* same as line-height here */
grid-auto-rows: 0;
}
.body>div {
grid-row: 1/-1;
overflow: hidden;
}
<div class="card">
<div class="title">
This is a title
</div>
<div class="body">
<div>
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>
footer text
</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 have the page as the showed picture
When something is clicked on the right column, the DIV on the left column will appear with generated content. This Div has a fixed height but its position may vary depending on the clicked position on the right column. As you can see when the Div appears, the footer is not pushed down.
I have tried many solutions on SO to re-position the footer as in How to keep footer at the bottom even with dynamic height website
but none of them works for me. Maybe I have done something wrong?
My footer's css:
#footer{ color: #666666; background: #D3D3D3; border-top: 1px solid #AAA;
padding: 1em; margin-top: 0; position:absolute; width:100%; }
DEMO : http://jsfiddle.net/WTUPn/
<div id="wrapper">
<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="push"></div>
</div>
<div id="footer">
</div>
<style type="text/css">
body, html { height: 100%; }
#wrapper {
min-height: 100%;
margin-bottom: -90px;
position: relative;
}
#footer, .push { height: 90px; }
#footer {
background: #000; color: #FFF;
}
</style>
apparently you'll need to insert more code but your footer cannot be positioned absolutely as it takes a specific position irrespective of other divs
Having trouble with just some basic responsive design. I've checked my math a number of times but I can't figure out why the left and right sections aren't lining up. It seems to be an issue with the padding:
http://jsfiddle.net/J3Rx3/
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
border: none;
}
body {
background-color: #ffffff;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
#container {
background-color: gray;
margin: 0 auto;
width: 90%; /* 960px */
}
#left {
background-color: #cccccc;
float: left;
padding: 0 5.5555556%; /* 10 / 180 */
width: 18.75%; /* 180 / 960 */
}
#right {
background-color: #999999;
float: right;
padding: 0 01.3157895%; /* 10 / 760 */
width: 79.166667%; /* 760 / 960 */
}
h1 {
font-size: 1.5em; /* 24px / 16px */
font-style: italic;
font-weight: normal;
}
h1 a {
color: #747474;
font: bold 0.458333333333333em Calibri, Optima, Arial, sans-serif;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
}
<div id="left">
<ul>
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</div>
<div id="right">
<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>
<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>
If you add box-sizing: border-box; (a savior when it comes to responsive design) to your * declaration, you can just use width: 20%; and width: 80% for your divs, then the padding will be included in, and won't add to, the width calculation.
I should also add that you can mix different units of measure. If you use percentages for width, you can use px or em for padding.
DEMO
The padding as described in:
#left {
background-color: #cccccc;
float: left;
padding: 0 5.5555556%; /* 10 / 180 */
width: 18.75%; /* 180 / 960 */
}
Is incorrect. It's not 10/180 but 10/960, or just plain 0. The padding in percentages is relative to the parent and not the object itself. Use:
#left {
background-color: #cccccc;
float: left;
padding: 0 0.0104%; /* 10 / 960 or just leave it out.*/
width: 18.75%; /* 180 / 960 */
}
Update:
Also the padding on the right box is incorrect. padding: 0 01.3157895%; should be padding: 0 0.013157895%; the decimal seperator is two places too far to the right. But it makes the same mistake as the previous and should actually be 10/960 instead of 760. or 0.0104%. But at those small numbers it doesn't really matter.
I am pretty sure you can use calc() to avoid those calculations. Here is PEN which simulates a similar example to what you are trying to achieve.
calc() automatically takes care of the calculations for you.
#left{
float:left;
width:calc(20% - 10px); /*20% minus the margin on both sides*/
margin:5px;
display:block;
}
#right{
float:left;
display:block;
width:calc(80% - 10px); /*80% minus the margin on both sides*/
margin:5px;
}
NOTE: operator in calc() needs to be surrounded by whitespace.
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>