I am trying to put a (horizontal) separator div between my 2 content divs. Instead of putting it between them, it shows under my banner div (above the 2 content divs).
Here is structure of my html:
<body>
<div id="page">
<div id="header">
<div id="logo"></div>
</div>
<div id="menuContainer">
<div id="menu">
<ul id="btns">
<li>DOMOV</li>
<li>SVETEĽNÉ ZDROJE</li>
<li>CHLADIČE</li>
<li>NAPÁJANIE</li>
<li>KONEKTORY</li>
<li>OPTIKA/REFLEKTORY</li>
<li>KONTAKTY</li>
</ul>
</div>
</div>
<div id="banner"></div>
<div id="separator"></div>
<div id="contentContainer">
<div id="contentBlock">
<div id="contentLeft">
<p id ="nadpis">LED SVETELNE ZDROJE</p>
<p id ="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar vitae mauris eget vehicula. Integer a mi ut lorem facilisis semper. Etiam faucibus lorem at tellus aliquam, sed aliquet risus venenatis. Etiam vulputate, magna rutrum eleifend rhoncus, justo nulla tristique magna, et tincidunt enim lacus in magna. Curabitur odio risus, eleifend vitae facilisis id, dignissim sed nunc. Pellentesque volutpat metus et scelerisque sagittis. Praesent mattis pulvinar est nec viverra. Nunc suscipit molestie fringilla.</p>
<p id ="katalog">KATALÓG NA STAHNUTIE</p>
<div id="pdf" ></div>
<div id="dodavatelia">
<div id="pic1"></div>
<div id="pic2"></div>
</div>
</div>
<div id="contentRight">
<p id ="rozdelenie">ZÁKLADNÉ ROZDELENIE</p>
<ul id="rozdel">
<li>COB</li>
<li>SMD</li>
<li>LED PÁSY</li>
<li>LED MODULY</li>
</ul>
</div>
</div>
<div id="oddelovac1"></div>
<div id="contentBlock">
<div id="contentLeft">
<p id ="nadpis">LED SVETELNE ZDROJE</p>
<p id ="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar vitae mauris eget vehicula. Integer a mi ut lorem facilisis semper. Etiam faucibus lorem at tellus aliquam, sed aliquet risus venenatis. Etiam vulputate, magna rutrum eleifend rhoncus, justo nulla tristique magna, et tincidunt enim lacus in magna. Curabitur odio risus, eleifend vitae facilisis id, dignissim sed nunc. Pellentesque volutpat metus et scelerisque sagittis. Praesent mattis pulvinar est nec viverra. Nunc suscipit molestie fringilla.</p>
<p id ="katalog">KATALÓG NA STAHNUTIE</p>
<div id="pdf" ></div>
<div id="dodavatelia">
<div id="citizen"></div>
<div id="qlt"></div>
</div>
</div>
<div id="contentRight">
<p id ="rozdelenie">ZÁKLADNÉ ROZDELENIE</p>
<ul id="rozdel">
<li>COB</li>
<li>SMD</li>
<li>LED PÁSY</li>
<li>LED MODULY</li>
</ul>
</div>
</div>
<div id="separator"></div>
<div id="contentBlock>
... The same structure
</div>
</div>
</div>
</body>
And here is my CSS:
body {
margin:0;
}
#page {
width:100%;
}
#header{
width:1000px;
height:100px;
margin:auto;
}
#logo {
width:140px;
height:47px;
background:url('../img/logo.png')no-repeat;
margin-top:50px;
}
#menuContainer {
height:37px;
width:100%;
background:#c4c8ca;
}
#menu{
width:1000px;
margin:auto;
}
#menu ul {
padding-top:8px;
text-align:right;
}
#banner {
width:100%;
height:353px;
background:url('../img/banner.png')no-repeat;
margin-top:2px;
}
#separator {
width:100%;
height:31px;
background:url('../img/oddelovac.png')no-repeat;
margin-top:6px;
}
#contentContainer {
width:100%;
display:block;
}
#contentBlock {
width:1000px;
margin:auto;
}
#contentLeft {
width:650px;
float:left;
}
#contentRight{
width:350px;
float:left;
}
add clear: both to #separator or overflow: hidden to #contentBlock.
edit:
You use same id attribute value for many elements - there can be only one, unique.
If you want to use same style to many elements then use class.
just add float:left
#contentBlock {
width:1000px;
margin:auto;
float:left;
}
#separator {
width:100%;
height:31px;
background-color:rgb(255,0,255);
margin-top:6px;
float:left;
}
Related
I have this weird case because my bug displays differently at my website and at JSFiddle. That's why I also put a printscreen to show you how it looks on my website.
Here is the JSFiddle: https://jsfiddle.net/Pysilla/cm8s1d7t/
<section id="fashion" class="img-responsive">
<div class="container">
<div class="row">
<div class="item element col-md-5">
<div class="page-header">
<h2>Fashion<span> photos</span></h2>
</div>
<p>Betiam finibus ac tellus sed ullamcorper. Suspendisse vestibulum mollis feugiat. Fusce vel turpis vitae nulla ullamcorper gravida non vel dolor. Ut rhoncus, metus vitae ultrices varius, ex mauris sodales leo, quis imperdiet turpis ipsum et ante. Phasellus hendrerit rutrum tincidunt. Sed sed viverra ligula, non ullamcorper mauris. Quisque dignissim sollicitudin nulla quis tincidunt. Cras at elementum massa. Cras eget mi hendrerit, congue nunc in, tristique massa. Vivamus at vestibulum ex.</p>
<div class="text-center">
<span>See more</span>
</div>
</div>
</div>
</div>
</section>
(When you change size of screen you could see little stripe on the left inside of the button)
I hope you could see the difference.
You just need to account for the 2px border on .btn-primary. You can use translate(calc(-100% - 2px)); on the hidden state of the pseudo element.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<style>
.btn-primary{
margin-top:1em;
background-color:#3CD3DC;
background-image:none;
border:2px solid #3CD3DC;
display:inline-block;
transition:all 0.3s;
overflow:hidden;
box-shadow:none !important;
position:relative;
}
.btn-primary:hover{
background-color:transparent;
border:2px solid #3CD3DC;
}
.btn-primary:before{
content:"";
position:absolute;
background-color:#1fa5ad;
width:100%;
height:100%;
top:0;
left:0;
transform:translateX(calc(-100% - 2px));
transition: 0.8s;
}
.btn-primary:hover:before{
transform:translateX(0%);
left:0;
}
.btn-primary span{
position:relative;
}
</style>
<section id="fashion" class="img-responsive">
<div class="container">
<div class="row">
<div class="item element col-md-5">
<div class="page-header">
<h2>Fashion<span> photos</span></h2>
</div>
<p>Betiam finibus ac tellus sed ullamcorper. Suspendisse vestibulum mollis feugiat. Fusce vel turpis vitae nulla ullamcorper gravida non vel dolor. Ut rhoncus, metus vitae ultrices varius, ex mauris sodales leo, quis imperdiet turpis ipsum et ante. Phasellus hendrerit rutrum tincidunt. Sed sed viverra ligula, non ullamcorper mauris. Quisque dignissim sollicitudin nulla quis tincidunt. Cras at elementum massa. Cras eget mi hendrerit, congue nunc in, tristique massa. Vivamus at vestibulum ex.</p>
<div class="text-center">
<span>See more</span>
</div>
</div>
</div>
</div>
</section>
Another alternative is to set the button's :before element visibility to "hidden" by default and then "visible" on mouse over.
.btn-primary:before{
content:"";
position:absolute;
background-color:#1fa5ad;
width:100%;
height:100%;
top:0;
left:0;
transform:translateX(-100%);
transition: 0.8s;
visibility: hidden;
}
.btn-primary:hover:before{
transform:translateX(0%);
left:0;
visibility: visible;
}
https://jsfiddle.net/cm8s1d7t/1/
I'm trying to make the image resolution width dictate the width of the container. The trick is that when a p element gets wider than the image, the whole container stretches. What I want it to do is for the p element to respect the width of the image and never stretch the container width more than the image does. I don't want to set a fixed width. Here's a demo:
#outer, #inner{
border-width: 1px;
border-style: solid;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
#outer {
border-color red;
}
#inner { border-color: red; display:inline-block; }
img{max-width:100%;}
.fixed {
width:300px; /*This is what i'm trying to avoid*/
}
<!DOCTYPE html>
<html>
<head>
<title>containers, img, p test</title>
</head>
<body>
<div id="outer">
<div id="inner">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
<div id="outer">
<div id="inner" class="fixed">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
<p>
This is how the first one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
</body>
</html>
Changing the CSS to inline-block will mean the elements increase with the size of the image.
I added inline-block for just the id img to show you how it can work.
#outer, #inner, #img {
border-width: 1px;
border-style: solid;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
#outer {
border-color red;
}
#inner { border-color: red; display:inline-block; }
#img { border-color: blue;display:inline-block;}
img{max-width:100%;}
.fixed {
width:300px; /*This is what i'm trying to avoid*/
}
<!DOCTYPE html>
<html>
<head>
<title>containers, img, p test</title>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="img">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
<div id="outer">
<div id="inner" class="fixed">
<div id="img">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
</div>
<p>
This is how the fist one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
</body>
</html>
Hope that is what you were after.
I am trying to create a layout where an element (.figure) is center aligned when it is shorter (in height) than its container (.timeline-content). But I want the element to have the same height as its container when it is longer than its container.
The height of the container itself depends on its parent.
This image should help clarify the desired behavior.
This is what I have right now, I don't quite understand why img extends past its parent even though its max-height: 100%
https://jsfiddle.net/kgdkyte4/3/
html{
position: relative;
}
.timeline-item{
width: 100%;
overflow:hidden
}
.timeline-content{
width: 50%;
float: left;
text-align: right;
}
.timeline-image{
display:flex;
align-items: center;
position:absolute;
right: 0;
width: 50%;
height:100%;
}
.figure{
width:100%;
max-height: 100%;
margin: 0;
position:relative;
}
img{
max-height:100%;
max-width:100%;
float:left;
}
<div class="timeline-item">
<div class="timeline-content">
<h3 class="timeline-title">Blah blah blah
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
</p>
</div>
<div class="timeline-image">
<figure class="figure">
<img src="http://via.placeholder.com/550x900">
<figcaption class="figure-caption">blah
</figcaption>
</figure>
</div>
</div>
Without knowing what you're trying to accomplish with the caption, this is the closest I've gotten. Update info on the caption and I'll see what more I can do.
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.timeline-item{
width: 100%;
position:relative;
}
.timeline-leftbox{
width:50%;
text-align:right;
padding:0 8px;
}
.timeline-rightbox{
position:absolute;
height:100%;
width:50%;
top:0;
right:0;
overflow:hidden;
white-space:nowrap;
}
.timeline-rightbox::after{
content:"";
display:inline-block;
height:100%;
width:0;
vertical-align:middle;
}
.timeline-rightbox img{
max-height:100%;
max-width:100%;
width:auto;
height:auto;
vertical-align:middle;
}
<div class="timeline-item">
<div class="timeline-leftbox">
<div>
<h3 class="timeline-title">Blah blah blah</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
</p>
</div>
</div>
<div class="timeline-rightbox">
<img src="http://via.placeholder.com/550x900" />
</div>
</div>
You can create a caption space under the image using calc css:
https://jsfiddle.net/freer4/r08ujx5p/3/
A following html markup creates a QA section in my site.
I want it to be this way - sentence in Q section should be positioned on the same line as "Q" symbol; Sentences in A section should be moved slightly to the right and each sentence should start from new line.
Like this:
But for now it looks this way:
<html>
<head>
<style type="text/css">
.qa b {
font-size: 50px;
}
.qa .answer_box {
margin-left: 90px;
display: inline;
}
.qa p {
font-size: 25px;
}
</style>
</head>
<div class="qa">
<div class="question">
<b>Q</b>
<p>
Do you believe in SEO?
</p>
</div>
<div class="answer">
<b>A</b>
<div class="answer_box">
<p>
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
Would be grateful for your help.
Use float and a padding/margin maneuver, with the b tag replaced with a strong and place within the first p tag per block:
p strong {
float: left;
margin-left: -1.5em;
font-size: 3em;
}
p {
padding-left: 5em;
}
<p>
<strong>Q:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim. Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.
</p>
<p>
<strong>A:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim.
</p>
<p>Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.</p>
http://jsfiddle.net/userdude/cZJhU/5/
Keep in mind you'll want to use classes to add these styles, not element-level selectors like p and p strong. This is for demonstration purposes only.
NOTE
For those claiming it does not look like what the OP asked for, here is what it appears like in every browser I look at it with:
I just rewrote your code as I couldn't deal with it - this looks exactly how you'd like it to be:
http://jsfiddle.net/f8NjK/
<div class="wrapper">
<div class="leftcol">
<strong>Q</strong>
</div>
<div class="rightcol">
<p>Do you believe in SEO?</p>
</div>
<div class="leftcol">
<strong>A</strong>
</div>
<div class="rightcol">
<p>Yes I do</p>
<p>SEO is a very powerful technique to increase your site ranking in Google.</p>
<p>Also it just cool and so and so</p>
</div>
</div>
CSS:
strong {
font-size: 50px;
}
.wrapper {
width:100%;
}
.leftcol {
width:10%;
display:inline-block;
}
.rightcol {
width:80%;
vertical-align:top;
display:inline-block;
}
I put a container. check this fiddle for live demo. http://jsfiddle.net/KdPfz/1/
.container
{
width: 100%;
height: 60px;
}
.letter
{
font-size: 50px;
float: left;
}
.sentence
{
width: 350px;
margin-top: 20px;
margin-left: 20px;
font-size: 20px;
float: left;
z-index: 5;
}
Like this?
<html>
<head>
<style type="text/css">
.qa b {
font-size: 50px;
}
.qa .answer_box {
margin-left: 90px;
display: inline;
}
.qa p {
font-size: 25px;
display: block;
}
.answer_box p {
margin-left: 50px;
}
</style>
</head><body>
<div class="qa">
<div class="question">
<b>Q</b>
<p style="display: inline-block;">
Do you believe in SEO?
</p>
</div>
<div class="answer">
<b>A</b>
<div class="answer_box">
<p style="display: inline-block;">
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
If you inject a display: inline-block; style into your first p tag, leave the rest to the p tags natural block format, and a conditional margin for the answer block.
This may be more what you are looking for - a fiddle - I re-wrote your html to avoid using styling elements
<div class="qa">
<div class="question">
<div class="bold-letters">Q</div>
<div class="questions">
<p>Do you believe in SEO?</p>
</div>
</div>
<div class="answer">
<div class="answer_box">
<div class="bold-letters">A</div>
<div class="answers">
<p>
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
and some short css
.bold-letters, .answers, .questions{
display:inline-block;
}
.bold-letters{
font-size:50px;
vertical-align:top;
margin-right: 30px;
}
.questions{
vertical-align:bottom;
}
I was writing this while the other answers popped up
http://jsfiddle.net/tprats108/ugaYM/
css:
.qa {
font-size: 25px;
}
.qa .heading {
font-weight: bold;
font-size: 50px;
float: left;
}
.qa .response {
float: left;
margin-left: 20px;
}
.clear {
clear: both;
}
html:
<div class="qa">
<div class="question">
<div class="heading">Q</div>
<div class="response">
<p>Do you believe in SEO?</p>
</div>
</div>
<div class="clear"></div>
<div class="answer">
<div class="heading">A</div>
<div class="response">
<p>Yes I Do</p>
<p>SEO is a very powerful technique to increase your site ranking in Google.</p>
<p>Also it just cool and so so so.</p>
</div>
</div>
</div>
I would like to know if for the demo index page of this site url, I can prevent the text from overflowing or let say use optional scrolling bar when the text goes over the bottom of the blue box? I would like the layout to be similar to this 'production' site (with server stats visits).
Can I do this using html 5? Should I include div so to limit text overflow under a certain screen resolution. Please find the html and style sheet code used (thanks for the author of this design and also Aayushi Jain who has help me with a few style sheet adjustments from another question here on this site).
style sheet
html {
overflow-y: scroll; }
div#wrapper {
width:90%;
margin: 10px auto;
position: relative;}
header#site {
height:80px;
padding:10px;
background-color:#0033FF;
margin:10px 0px;
text-align:center; }
footer {
font-size:0.8em;
clear:both;}
footer .col {
width:30%;
margin:1% 1.1%;
padding:2px;
height:100px;
background-color:#F63;
float:left; }
nav {
background-color:#0033FF;
position: absolute;
left: 0;
bottom: 0;
top: 110px;
width: 29%; }
nav ul {
list-style:none;}
nav ul li a {
display: block;
background-color:#CCC;
margin-right: 20px;
width: 110px;
line-height:1.5em;
text-align: center;
text-decoration: none;
color: #000; }
nav ul li a:hover {
color: #fff;
background-color:#39C; }
article {
background-color:#0066FF;
float:right;
width:69%;
margin-right:10px;
height:50%;
overflow-y:scroll;
}
article header {
background-color:#F90;
padding:15px; }
section#abstract {
font-size:1.09em;
font-style:italic;
margin:10px 0px;
text-align:justify;
padding:5px 80px; }
section#main {
font-size:1em;
padding:20px;
text-align:justify;
float: left;
margin: 0;
padding: 0;
display: inline; }
.ads {
height:50%;
width:30%;
background-color:#0033FF;
margin-bottom:1%;
float:left;}
.ads p:first-child {
padding:15px;
font-size:2em;}
.ads p:last-child {
padding-left:15px;
font-size:1em;color:#CCC;}
the html file
<!DOCTYPE html>
<!-- saved from url=(0064)http://toytic.com/class/examples/e808_html5_Header2NavAside.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Web site</title>
<link href="style.css" rel="stylesheet" />
<style>
</style>
<!-- Tell IE we are using html5 + CSS -->
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper">
<header id="site">
<h1>WEBSITE</h1>
</header>
<article>
<header>
<h2>This is the article header</h2>
<time datetime="25-11-2010" pubdate="">25th November 2010</time>
</header>
<section id="abstract">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et orci sed neque tincidunt dictum nec at lacus. Fusce feugiat sagittis ligula ac aliquam. Integer ut sodales justo. Etiam ultrices cursus iaculis. Suspendisse bibendum. </p>
</section>
<section id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac velit mauris. Nulla cursus pretium dapibus. Fusce at faucibus mi. Etiam ac nisi condimentum quam vulputate euismod. Nunc viverra consectetur tempor. Praesent rutrum diam in leo lacinia sit amet volutpat leo tempus. Donec sodales, velit et viverra imperdiet, velit leo placerat libero, fringilla scelerisque justo sapien sit amet sapien. Donec blandit tellus at mi hendrerit hendrerit. Sed suscipit sagittis sodales. Etiam sagittis, tortor quis sagittis laoreet, erat nibh mollis sem, ut tristique felis augue non metus. </p>
<p>Etiam in gravida mi. Maecenas placerat, justo vel gravida egestas, odio sem dictum justo, eget volutpat massa augue in augue. Sed tempus sem a nulla eleifend aliquet aliquet diam pharetra. Proin sit amet imperdiet est. Cras vitae felis in nulla tristique porttitor ut sit amet neque. Quisque sed nisi quam. Aliquam erat volutpat. Nullam dignissim augue odio. Nam sit amet ipsum arcu, id rutrum felis. Phasellus velit mauris, dictum eget tincidunt eget, condimentum eget risus. Proin nibh nulla, sagittis et feugiat in, luctus quis velit. Aenean lobortis mi ut odio accumsan adipiscing. Nulla quis ipsum magna. Suspendisse auctor mauris eu mi cursus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida vulputate leo, consectetur porta sem euismod nec. Donec et dolor lectus, vel cursus massa. Morbi eu dictum arcu. Fusce luctus porttitor neque, sed eleifend orci tristique convallis. </p>
</section>
</article>
<nav>
<ul>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<footer>
<div class="col">
<h4>Contact</h4>
<adress>
<p>Janet Griffith from Public Relations</p>
<p>Jil Sanders, webmaster</p>
</adress></div>
<div class="col">
<h4>Sites of interest</h4>
<aside>
<p>Site A</p>
<p>Another one</p>
</aside>
</div>
<div class="col">
<h4>Legal stuff</h4>
<p>Copyright</p>
<p>Terms of Service</p>
</div>
</footer>
</div>
</body></html>
thanks
Pascal
If you don't want to see the scroll bar then use overflow: hidden or overflow: auto.
Now if you want the header part to be static then put your section main and abstract in a div and make its height: 500px (or something you want) but make it fix and then use overflow: hidden in the newly mad div if you don't want to show the overflow part or use overflow: auto if you want to show the overflow part but not the scroll bar.