I am trying to get a basic layout going with CSS.
Header
Aside - Content
Footer
I put a margin-top property for the footer, but i am not sure why it is not working. Here is the simple code I have so far:
<style>
header {
width: 100%;
height: 100px;
border: 1px solid black;
margin-bottom: 10px;
}
aside {
width: 100px;
height: 200px;
border: 1px solid green;
float: left;
margin-right:10px;
}
article {
height: 200px;
width: 200px;
border: 1px solid red;
float: left;
}
footer {
clear: both;
border: 1px solid blue;
width: 100%;
height: 100px;
margin-top: 10px;
}
</style>
<header> </header>
<aside> </aside>
<article> </article>
<footer> </footer>
You can see the footer not getting a margin here:
http://i.imgur.com/PeeTg6I.png
Add display: inline-block; in footer.
<style>
header {
width: 100%;
height: 100px;
border: 1px solid black;
margin-bottom: 10px;
}
aside {
width: 100px;
height: 200px;
border: 1px solid green;
float: left;
margin-right:10px;
}
article {
height: 200px;
width: 200px;
border: 1px solid red;
float: left;
}
footer {
clear: both;
border: 1px solid blue;
width: 100%;
height: 100px;
margin-top: 10px;
display: inline-block;
}
</style>
<header>
</header>
<aside>
</aside>
<article>
</article>
<footer>
</footer>
Try It Once
*{
margin:0px;
padding:0px;
}
header {
width: 100%;
height: 100px;
border: 1px solid black;
margin-bottom:10px;
}
aside {
width: 100px;
height: 200px;
border: 1px solid green;
float: left;
margin-bottom:10px;
}
article {
height: 200px;
width: 200px;
border: 1px solid red;
float: left;
margin-bottom:10px;
}
footer {
clear: both;
border: 1px solid blue;
width: 100%;
height: 100px;
margin-right:10px;
}
<body>
<header>
</header>
<aside>
</aside>
<article>
</article>
<footer>
</footer>
</body>
body{
font-family:Arial, Helvetica, sans-serif;
}
header{
border-radius:10px;
padding:10px 1%;
margin:10px 1%;
background-color:#066;
text-align:center;
}
article{
background-color:#066;
width:50%;
height:100%;
float:left;
border-radius:10px;
text-align:center;
margin:10px;
}
content{
background-color:#066;
width:40%;
height:100%;
border-radius:10px;
text-align:center;
margin:10px;
float:right;
}
footer{
clear:both;
border-radius:10px;
background-color:#066;
text-align:center;
padding:10px;
margin:10px;
}
<header>
<h2>Header</h2>
</header>
<article>
<h2>Aside</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id odio velit. Praesent orci lectus, fermentum vel ullamcorper vel, pharetra ac elit. Fusce eu sapien ac ligula tempor fermentum. Sed vulputate rutrum mattis. Ut et metus ac lectus fermentum porttitor.</p>
</article>
<content>
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id odio velit. Praesent orci lectus, fermentum vel ullamcorper vel, pharetra ac elit. Fusce eu sapien ac ligula tempor fermentum. Sed vulputate rutrum mattis. Ut et metus ac lectus fermentum porttitor. </p>
</content>
<footer>
<h2>Footer</h2>
</footer>
Related
In mobile view, the footer is not remaining at at the bottom of the page. It stays somewhere above the bottom. I want the footer to stay at the bottom always in mobile view and desktop view. But the footer should not be visible always, if the site has much contents, user will have to scroll down to see the footer. What changes do I need to make in the css file to make the footer stay at the bottom of the page always?
html { height: 100%; }
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:1100px;
overflow:auto;
height:100%;
}
#mainPart{
margin:0 auto;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
}
footer {
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
}
.footrow{
overflow:hidden;
background-color: #111;
display:block;
}
.footrow2{
overflow:hidden;
background-color: #002c42;
display:block;
padding:15px;
}
.foot{
max-width:1080px;
margin:0 auto;
font-size:11px;
line-height:18px;
}
.foot-p{
font-weight: 600;
padding:2px;
color:#66e355 !important;
}
.half-width {
width: 50%;
float:left;
}
.quarter-width {
width: calc(25% - 30px);
float:left;
padding:15px;
}
#social2 {
display: block;
background-color: transparent;
float: left;
margin: 0 auto;
}
.sc-icn2 {
width: 50px;
height: 50px;
display: block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
}
<html>
<head>
</head>
<body>
<div id="mainPart">
</div>
<div class="container">
</div>
<footer>
<div class="footrow" >
<div class="foot">
<div class="quarter-width">
<div>
</div>
</div>
<div class="quarter-width">
</div>
<div class="quarter-width">
<div id="social2">
</div>
</div>
<div class="quarter-width">
</div>
</div>
</div>
<div class="footrow2" >
<div class="foot">
<div class="half-width">
</div>
<div class="half-width">
</div>
</div>
</div>
</footer>
</body>
</html>
To achieve that result define the footer position to bottom. position: absolute; bottom: 0;
The position property specifies the type of positioning method used for an element. The absolute element is positioned relative to its first positioned ancestor element which is the body As you can see in body css rule the element is positioned relative to its normal position.
More about position property can be found here.
html {
position: relative;
min-height: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
overflow-x: hidden;
margin: 0px;
position: relative;
min-height: 100%;
height: auto;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #34495e;
color:#fff;
text-align: center;
}
<div class="demo">
<h1>Footer Stays Bottom</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
To make the footer stay at bottom of the page, you simply have to add position: absolute; and bottom: 0; in the block of CSS that applies to footer. So it will become:
footer{
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
position: absolute;
bottom: 0;
}
You can do this by many ways:
There is negative bottom margins on wrappers
There was a wrapping element that held everything except the footer. It had a negative margin equal to the height of the footer.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
<div class="content">
<h1>Sticky Footer with Negative Margin 1</h1>
</div>
<footer class="footer">
Footer
</footer>
Negative top margins on footers
This technique did not require a push element, but instead, required an extra wrapping element around the content in which to apply matching bottom padding to. Again to prevent negative margin from lifting the footer above any content.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
background: red;
}
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
There is calc() reduced height wrappers
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.content {
min-height: calc(100vh - 70px);
padding: 40px 40px 0 40px;
}
.footer {
height: 50px;
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
<div class="content">
<h1>Sticky Footer with calc()</h1>
</div>
<footer class="footer">
Footer
</footer>
And also you can use flexbox
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1 0 auto;
padding: 20px;
}
.footer {
flex-shrink: 0;
padding: 20px;
background: #42A5F5;
color: white;
}
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
</div>
<footer class="footer">
Footer
</footer>
This works for you. Try it.
For that add enough content in side the .container div.
And add min-height value to .container as below.
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:100%;
overflow:auto;
height:100%;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
/*new style*/
min-height:768px;
}
#media only screen and (max-width: 768px) {
.container{
max-width: 80%;
margin:20px auto 40px auto;
min-height:480px;
}
}
html { height: 100%; }
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:100%;
overflow:auto;
height:100%;
}
#mainPart{
margin:0 auto;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
min-height:768px;
}
footer {
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
}
.footrow{
overflow:hidden;
background-color: #111;
display:block;
}
.footrow2{
overflow:hidden;
background-color: #002c42;
display:block;
padding:15px;
}
.foot{
max-width:1080px;
margin:0 auto;
font-size:11px;
line-height:18px;
}
.foot-p{
font-weight: 600;
padding:2px;
color:#66e355 !important;
}
.half-width {
width: 50%;
float:left;
}
.quarter-width {
width: calc(25% - 30px);
float:left;
padding:15px;
}
#social2 {
display: block;
background-color: transparent;
float: left;
margin: 0 auto;
}
.sc-icn2 {
width: 50px;
height: 50px;
display: block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
}
#media only screen and (max-width: 768px) {
.container{
max-width: 80%;
margin:20px auto 40px auto;
min-height:480px;
}
}
<html>
<head>
</head>
<body>
<div id="mainPart"></div>
<div class="container">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<footer>
<div class="footrow" >
<div class="foot">
<div class="quarter-width">
<div>
</div>
</div>
<div class="quarter-width">
</div>
<div class="quarter-width">
<div id="social2">
</div>
</div>
<div class="quarter-width">
</div>
</div>
</div>
<div class="footrow2">
<div class="foot">
<div class="half-width">
</div>
<div class="half-width">
</div>
</div>
</div>
</footer>
</body>
</html>
OK so here is my code
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
I want my website to look like this: first square is red, next to is green, and below red is yellow square. I thought that float left on first element should make next one jump right next to him. Why doesn't it work?
Add float: left; to .div2 and clear:left to .div3
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
float: left;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
clear: left;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
You need to add float:left to the green box in order to make the element stand next to red. If you added the float:left to the yellow square, it would stand next to green. We added clear: left to "clear" the left floats.
Read more about floats.
The problem is that floating elements are out-of-flow:
An element is called out of flow if it is floated, absolutely
positioned, or is the root element.
Therefore, they don't impact surrounding elements as an in-flow element would.
This is explained in 9.5 Floats:
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling:after {
content: 'Block sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
<div class="float"></div>
<div class="block-sibling">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>
There is an exception to that problematic behavior: if a block element establishes a Block Formatting Context (is a BFC root), then it won't overlap the float:
The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context […] must not overlap the margin box of any floats in the same
block formatting context as the element itself.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling.bfc-root:after {
content: 'BFC sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="float"></div>
<div class="block-sibling bfc-root">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>
For example, you can establish a BFC with overflow different than visible, e.g. hidden
.div2 {
overflow: hidden;
}
.div1 {
height: 40px;
width: 40px;
background-color: red;
display: block;
float: left;
}
.div2 {
height: 40px;
width: 40px;
background-color: green;
display: block;
overflow: hidden;
}
.div3 {
height: 40px;
width: 40px;
background-color: yellow;
display: block;
}
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
float:left;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
float:left;
clear: both;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
This will do what you want, but, there is much to improve in that code to make it more simple and more DRY, this will be a short answer, if you want to see a better and smaller style to do the same just ask, and gladly will help.
Hi i have problem with positions of this tags
I have this code
<div class="wrap">
<div class="site-content">
<article class="col-sm-12 col-lg-8 article">
<div class="post-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum tincidunt sodales. Fusce euismod viverra eros sit amet porttitor. Aenean purus neque, tempus quis diam in, scelerisque pellentesque leo. Suspendisse nec molestie erat. Duis faucibus, tellus eget pretium ullamcorper, turpis ante finibus mi, sed accumsan libero elit nec urna. Phasellus odio lectus, interdum eu vehicula a, malesuada vel tellus. Suspendisse sit amet ullamcorper nibh. Nullam fermentum mi sed malesuada ullamcorper. Etiam et lacinia elit. Mauris pellentesque nunc sapien, id ultricies magna venenatis non. Phasellus volutpat leo ac diam bibendum placerat. Vestibulum elementum, ex a tempor bibendum, nibh neque egestas enim, vel aliquet nisl turpis vel ligula. Sed sagittis dolor id metus ultrices tristique a nec nibh. Curabitur hendrerit rutrum dui, at placerat nisl rutrum ut. Duis vitae semper nunc, non aliquet sapien.
</p>
</div>
</article>
<aside class="col-sm-12 col-lg-4 aside-panel">
<h3 class="caption">Most read posts</h3>
<div class="top-post">
<div class="top-post-image">
<a href="#">
<img src="img/aside1.png" alt="">
</a>
</div>
<span class="post-info">28. November 2014</span>
<span class="separator">//</span>
<span class="post-info">Iphone</span>
<a class="top-post-title" href="#">Etiam lorem orci hendrerit ac neque id interdum fringilla metus</a>
</div>
<div class="top-post">
<div class="top-post-image">
<a href="#">
<img src="img/aside3.jpg" alt="">
</a>
</div>
<span class="post-info">28. October 2014</span>
<span class="separator">//</span>
<span class="post-info">Huawei</span>
<a class="top-post-title" href="#">Pellentesque tincidunt consequat nibh at vestibulum</a>
</div>
</aside>
</div><!-- end of .site-content -->
</div><!-- end of .wrap -->
problem is: my wrap have height:0px but why? i have my content in wrap... and second problem is: why text after tag is not under all of my content?
Here is my CSS:
html{
height: 100%;
}
/* Blocks */
div.container{
padding: 0;
width:100%;
}
/* Post */
article.article{
position: static;
font-size: 16px;
line-height: 28px;
float: left;
}
article.article p{
text-align: justify;
margin-bottom: 28px;
}
.aside-panel{
position: static;
}
.post-intro{
position: absolute;
color:#fff;
bottom: 0;
left: 0;
width: 100%;
}
.post-content:after, .post-content:before{
content: " ";
display: table;
}
.info{
font-size: 17px;
font-style: italic;
width: 100%;
color: #eee;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.info-left{
left:0;
float: left;
}
.info-right{
right:0;
float: right;
}
.perex{
font-size: 20px;
margin: 10px 0 30px 0;
font-style: italic;
}
.intro-image{
min-width: 100%;
width: 100%;
height: 550px;
max-width: 1000px;
background-repeat: no-repeat;
background-position: center;
}
.overlay{/* Image overlay */
position: relative;
height: 100%;
background-color: rgba(32,32,32,.7);
}
.search{
position: absolute;
width: 300px;
margin:80px 0 10px 0;
right: 0;
}
.search .searchbox{
width: 255px;
background: transparent;
font-size: 22px;
padding: 0 25px;
color: #fff;
font-weight: bold;
outline: none;
border: 1px solid rgba(238,238,238,.3);
height: 45px;
}
.search .submit{
width:45px;
height: 45px;
border: 0;
border: 1px solid rgba(238,238,238,.3);
border-left: 0;
float: right;
background: transparent;
color: #a9a9a9;
font-size: 22px;
}
.searchbox:focus{
border: 1px solid #fff;
}
.searchbox:focus ~ .submit{
border: 1px solid #fff;
border-left: 0;
color: #fff;
}
.focused{
border: 1px solid #fff;
}
.fieldset-default{
border: 1px solid #c0c0c0;
}
/* Change color of placeholder when input is focused */
.searchbox:focus::-webkit-input-placeholder {color: #fff;}
.searchbox:focus:-moz-placeholder {color:#fff;opacity:1;}
.searchbox:focus::-moz-placeholder {color:#fff;opacity:1;}
.searchbox:focus:-ms-input-placeholder {color:#fff;}
.post-brand{
/*change for bigger logo */
position: absolute;
width: 350px;
margin:80px 0 10px 0;
color:#fff;
left:0;
line-height: 45px;
font-size: 40px;
}
.search fieldset{
padding: 0;
}
/* Navigate bar/box */
.box{
height: 50px;
width: 100%;
background-color: rgb(0,0,0);
}
.no-format{
text-decoration: none;
color: inherit;
}
.no-format:hover{
text-decoration: none;
color: inherit;
}
.box.box-top{
top:0;
}
.box .logo{
color:white;
font-family: 'Lobster', cursive;
font-size: 32px;
float: left;
}
.box .spacer{
width: 1px;
height:30px;
margin: 10px 30px;
background: white;
float:left;
}
/* Default definition of box item */
.box-item{
padding: 0 15px;
color:#919090;
float: left;
line-height: 47px;
display: block;
font-weight: bolder;
z-index: 999;
}
.box-item:hover{
padding: 0 15px;
color:#fff;
float: left;
line-height: 47px;
display: block;
font-weight: bolder;
text-decoration: none;
}
/* Aside with top articles */
.top-post{
margin-bottom: 20px;
}
.top-post-image{
margin-bottom: 5px;
height: 170px;
overflow: hidden;
}
.top-post-image img{
width: 100%;
height: auto;
}
.post-info{
color: #888787;
font-size: 13px;
}
.separator{
color: #888787;
font-size: 13px;
font-style: italic;
}
.horizontal-divider{
border-bottom: 1px solid #626262;
border-top: 1px solid #626262;
height: 4px;
}
.top-post-title{
display: block;
font-weight: 600;
text-decoration: none;
color: #111;
font-size: 19px;
}
.top-post-title:hover{
display: block;
font-weight: 600;
text-decoration: none;
color: #111;
}
/* Wrappers */
.wrap{
position: relative;
width:100%;
margin:auto;
max-width: 1100px;
}
.box .wrap{
height: 50px;
}
.site-content{
position: absolute;
height: auto;
}
Here you have my complete code: HERE
Look at text after comment
Its because you have positioned .site-content absolutely. Position it relatively.
.site-content{
position: relative;
height: auto;
}
Updated Fiddle
Make the following correction:
Remove position:absolute from .site-content
Add overflow:hidden to .wrap
I have tested it. Let me know if you have any further doubts or queries.
my sugestion is:
.site-content{
position:relative;
min-height:100%;
overflow:hidden;}
i use it and this work for me.
I was wondering why my Right-nav div isn't responding to anything in the CSS.
HTML:
<body>
<div id="header">Header</div>
<div id="main-wrap">
<div id="sidebarwrap">
<div id="nav">Left Nav</div>
advertisment pictures
</div>
<div id="content-wrap">
<div id="picture-wrap">
<div class="info">Picture</div>
</div>
<div id = "Content"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div class ="Right-nav"><p>right-nav</p></div>
</div>
</div>
<div id="footer">Footer</div>
</body>
CSS:
/**
* custom layout
*/
#header,
#footer {
background-color: #f1f1f1;
width: 60%;
margin: 0 auto;
}
#main-wrap {
background-color: #D9D9D9;
width: 60%;
margin: 0 auto;
}
#sidebar {
background-color: #d2d2d2;
}
#content-wrap {
background-color: #c5c5c5;
}
.info {
background-color: #DDD;
}
.info + .info {
background-color: #e6e6e6
}
/* sizes */
#main-wrap > div {
min-height: 450px;
}
#header,
#footer {
min-height: 40px;
}
.info {
min-height: 80px;
}
/* layout */
#main-wrap {
/* overflow to handle inner floating block */
overflow: hidden;
}
#sidebarwrap {
float: left;
width: 30%;
overflow:hidden;
background-color:blue;
}
#nav{
min-height: 80px;
background-color: red;
}
#content-wrap {
float: right;
width: 70%;
overflow:hidden;
background-color:blue;
}
#Content{
float:left;
width:40%;
min-height:370px;
background-color:red;
}
#Right-nav{
background-color:red;
}
#picture-wrap {
/* overflow to handle inner floating block */
overflow: hidden;
}
.info {
width:100%;
float: left;
}
It's because you've given the right div a class in the HTML but an id in the CSS, change both to one or the other and the problem should be resolved.
Change <div class="Right-nav"> to <div id="Right-nav">
Problem:
I am trying to extend the border line of each div so it has full height, see the following picture:
HTML code:
<div class="wrapper">
<div class="box1row box1top">
<div class="arrow"><img src="./img/circle_arrow_right.png" class="arrowimage"></div>
<div class="numbers">1.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar.</div>
</div>
<div class="box1row box1bottom">
<div class="arrow"> </div>
<div class="numbers">2.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar. Mauris euismod sem ornare nisi consequat quis tincidunt turpis tempor. Vivamus mollis luctus nulla sit amet consequat.</div>
</div>
</div>
CSS code:
.wrapper {
margin-bottom: 1.5em;
}
.arrow {
display: block;
float: left;
border-right: 1px solid #ddd;
width:40px;
text-align:center;
padding-top:5px;
}
.arrowimage {
width: 16px;
height: 16px;
}
.text {
display: block;
float:left;
border-left: 1px solid #ddd;
width:585px;
padding-left:5px;
margin-left: -1px;
}
.numbers {
display: block;
float:left;
border-left: 1px solid #ddd;
width:30px;
text-align:center;
margin-left: -1px;
}
.box1row {
border: 1px solid #ddd;
margin-bottom: -1px;
}
.box1top {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.box1bottom {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
Question:
How do I extend the line vertically using CSS?
Note. I am using this together with mPDF which is a class to convert HTML/CSS to PDF. mPDF does not allow border-radius to be applied to the table element, and thus I am doing a div-solution.
Since it's tabular data use a <table> with border-collapse:collapse and turn off all outer borders:
HTML
<div class="wrapper">
<table>
<tr>
<td class="arrow"><img src="./img/circle_arrow_right.png" class="arrowimage"></td>
<td class="numbers">1.</td>
<td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar.</td>
</tr>
<! -- ...... -->
<tr>
<td class="arrow"> </td>
<td class="numbers">2.</td>
<td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar. Mauris euismod sem ornare nisi consequat quis tincidunt turpis tempor. Vivamus mollis luctus nulla sit amet consequat.</td>
</tr>
</table>
</div>
CSS
/* collapse all borders */
.wrapper table{
width:100%;
border-collapse:collapse;
}
/* activate all borders */
.wrapper table td {
border:1px solid #ddd;
}
/* turn off unnecessary borders: */
.wrapper table tr:first-child td{
border-top:none;
}
.wrapper table tr:last-child td{
border-bottom:none;
}
.wrapper table tr td:last-child{
border-right:none;
}
.wrapper table tr td:first-child{
border-left:none;
}
/* other elements */
.arrow {
width:40px;
text-align:center;
padding-top:5px;
}
.arrowimage {
width: 16px;
height: 16px;
}
.text {
width:585px;
padding-left:5px;
}
.numbers {
width:30px;
text-align:center;
}
Then you can achieve the rounded borders effect by using border-radius on your .wrapper:
.wrapper {
margin-bottom: 1.5em;
border: 1px solid #ddd;
border-radius: 4px;
}
JSFiddle Demo
While not being a pure CSS solution, the problem can be solved by applying a 1px background-image with repeat-y to .box1row. You already have a fixed width on .number so the background-image can be positioned correctly to replace the border.
Given that my first suggestion (in the comments) won't work because it doesn't play nice with mPDF, another possibility is to use display:table-cell instead of floating your elements:
.wrapper {
margin-bottom: 1.5em;
}
.arrow {
display: table-cell;
width:40px;
text-align:center;
padding-top:5px;
}
.arrowimage {
width: 16px;
height: 16px;
}
.text {
display: table-cell;
border-left: 1px solid #ddd;
width:585px;
padding-left:5px;
margin-left: -1px;
}
.numbers {
display: table-cell;
border-left: 1px solid #ddd;
width:30px;
text-align:center;
margin-left: -1px;
}
.box1row {
border: 1px solid #ddd;
margin-bottom: -1px;
display: table;
}
.box1top {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.box1bottom {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
Updated demo
I'm not sure how mPDF will like that, and bear in mind that it is not IE7 compatible.
Otherwise, if your data qualifies semantically as tabular then you could mark it up as a table, which I imagine won't give mPDF any grief.