I'm kind of new in web developing. I'm trying to draw 3 vertical bands (blue, white, and red) that go all over the top to the bottom of the page but I have no idea how to do it.
<% include partials/header %>
<div class="container">
<div class="row">
<div class="col-lg-12"> <h3 style="text-align: center">A QUEIJARIA</h3></div>
</div>
<hr>
<h1 style="text-align: center">alguma frase bacana pra colocar aqui</h1>
<div class="row">
<div class="col-lg-6"> <p class="colunas">Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p> </div>
<div class="col-lg-6"> <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p> </div>
</div>
<div class="botao">
<a class="btn btn-primary btn-large" href="quemsomos" >Mais detalhes!</a>
</div>
<div class="row">
<div class="col-lg-12"> <h3 style="text-align: center">NOSSOS PRODUTOS</h3></div>
<hr>
</div>
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img class="img_queijo">
<div class="caption">
<h4>Queijos Massa mole afinado</h4>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img class="img_queijo">
<div class="caption">
<h4>Queijos Massa semidura</h4>
</div>
</div>
</div>
<div class="botao">
<a class="btn btn-primary btn-large" href="produtos" >Nossos Queijos!</a>
</div>
</div>
</div>
<% include partials/footer %>
from comment:
you can use html {
min-height: 100%;
background: linear-gradient(to right,blue 33.33%, white 33.33%, white 66.66%, red 66.66%);
}
see https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.
Demo:
html {
min-height: 100%;
background: linear-gradient(to right,blue 33.33%, white 33.33%, white 66.66%, red 66.66%);
}
Add some fake contents ? from https://www.webpagefx.com/web-design/html-ipsum/ .
html {
min-height: 100%;
background: linear-gradient(to right,blue 33.33%, white 33.33%, white 66.66%, red 66.66%);
}
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimpleByMe</title>
</head>
<style type="text/css">
#media screen and (min-width: 480px)
{
.col-lg-4{
width: 33.33%;
float: left;
}
.d1
{
background-color: green;
}
.d2
{
background-color: red;
}
.d3
{
background-color: blue;
}
</style>
<body>
<!-- add data between <div> it will a automatically expand vertically -->
<div class ="col-lg-4 d1">1st</div>
<div class ="col-lg-4 d2"> 2nd</div>
<div class ="col-lg-4 d3"> 3rd</div>
</body>
</html>
Related
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
<div class="border">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-6 block">
<h4>Weddings</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Studio</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Nature</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Events</h4>
</div>
</div>
</div>
</div>
</div>
</div>
I need help achieving a layout like this:
Desired layout
I'm having trouble getting the child divs on the right to match the height of the parent. Any help would be much appreciated.
In order for children to match the width and height of their parent element you need to remove all padding and margins from the child element. You can then set the height and the width of the child to 100%. The height and width would then be controlled by the parent element.
Here is the code for your solution. Please check
.h-100{
height:100%;
}
.h-50{
height:50%;
}
.block{
text-align:center;
background-color:#f2f2f2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
<div class="border">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
<div class="container-fluid h-100">
<div class="row align-items-center h-100">
<div class="col-xs-12 col-md-6 block h-50">
<div class="d-flex align-items-center h-100 justify-content-center"><h4>Weddings</h4> </div>
</div>
<div class="col-xs-12 col-md-6 block h-50">
<div class="d-flex align-items-center h-100 justify-content-center"><h4>Studio</h4> </div>
</div>
<div class="col-xs-12 col-md-6 block h-50">
<div class="d-flex align-items-center h-100 justify-content-center"><h4>Nature</h4> </div>
</div>
<div class="col-xs-12 col-md-6 block h-50">
<div class="d-flex align-items-center h-100 justify-content-center"> <h4>Events</h4> </div>
</div>
</div>
</div>
</div>
</div>
</div>
.container-fluid .row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.container-fluid .row .about-info {
margin: 40px;
}
.container-fluid .row .about-info .border {
border: 1px solid #0086c5;
padding: 40px;
}
.container-fluid .row .about-info .border h3 {
color: #0086c5;
}
.container-fluid .row .about-container .container-fluid {
height: 100%;
background: #0086c5;
}
.container-fluid .row .about-container .container-fluid .row {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
height: 100%;
padding: 40px;
box-sizing: border-box;
}
.container-fluid .row .about-container .container-fluid .row > div {
color: #fff;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.container-fluid .row .about-container .container-fluid .row > div h4 {
align-self: center;
}
.container-fluid .row .about-container .container-fluid .row > div:not(:nth-child(2n)) {
border-right: 2px solid #fff;
}
.container-fluid .row .about-container .container-fluid .row > div:not(:nth-last-child(-n + 2)) {
border-bottom: 2px solid #fff;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
<div class="border">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-6 block">
<h4>Weddings</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Studio</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Nature</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Events</h4>
</div>
</div>
</div>
</div>
</div>
</div>
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'm quiet surprise I thought the use of container-fluid will give me a full width carousel but it didn't. It has a padding right and left of 15 px so i add a new class remove-padding in order to have no padding but it didn't work.
Any idea for having a carousel without padding ?
$(document).ready(function(){
$('.slick-carousel').slick({
arrows:true,
prevArrow:'<a class="slick-prev"><span class="glyphicon glyphicon-chevron-left"></span></a>',
nextArrow:'<a class="slick-next"><span class="glyphicon glyphicon-chevron-right"></span></a>'
});
});
.slick-prev {
left: 50px;
}
.slick-next {
right: 50px;
}
.slick-prev, .slick-next {
background: none;
border: medium none;
color: blue;
cursor: pointer;
display: block;
font-size: 24px;
height: 20px;
line-height: 0;
margin-top: -10px;
outline: medium none;
padding: 0;
position: absolute;
top: 50%;
width: 20px;
}
.slick-prev:before {
content: "";
}
.slick-next:before {
content: "";
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: #fff; }
.slick-carousel h1{ position:absolute; top:40px; left:20%; color:#fff; }*/
.remove-padding {padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-12 pen">
<div class="page-header">
<h5>Slick Carousel</h5>
<h1>Basic Carousel</h1>
<ul class="technology">
<li>Bootstrap <span class="label label-default">3.3.4</span></li>
<li>jQuery <span class="label label-default">2.1.3</span></li>
<li>
<span class="glyphicon glyphicon-book"></span> Documentation
</li>
</ul>
</div>
</div>
</div>
<!-- /container --></div>
<div class="container-fluid remove-padding">
<!-- START MOD -->
<div class="slick-carousel">
<div><img src="http://sandbox.jsnegley.net/pics/carousel-1.jpg" class="img-responsive">
<h1>Title 1</h1>
</div>
<div><img src="http://sandbox.jsnegley.net/pics/carousel-2.jpg" class="img-responsive">
<h1>Very long crazy long mega long title</h1>
</div>
<div><img src="http://sandbox.jsnegley.net/pics/carousel-3.jpg" class="img-responsive"><h1>Title Title title</h1></div>
</div>
<!-- END MOD -->
</div>
<!-- /container --></div>
<div class="container"><div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div></div>
Add class row next to class slick-carousel.
This fixed the problem.
Some explanation:
.container-fluid adds 15px of padding on the left and right in addition to horizontal auto margin.
You can simply remove .container > .row > .col-sm-12 in your html and just use a div.
I am having some difficulty with a blockquote element to display on top of a div I have created as my image slider. I have included a fiddle so you can see what i see.
My demo
Here is the code:
<div>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="http://www.pressrecord.com.au/wp-content/uploads/2013/02/example.png" alt="">
<div id="main-body-wrapper">
<p class="caption" style="position:absolute;">
<span class="captionspan">
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
<cite>Somebody famous</cite>
</blockquote>
</span></p>
</div>
</li>
<li>
<img src="http://www.pressrecord.com.au/wp-content/uploads/2013/02/example.png" alt="">
<div id="main-body-wrapper">
<p class="caption" style="position:absolute;">
<span class="captionspan"></span>
</p>
</div>
</li>
<li>
<img src="img/nurseriesbig.jpg" alt="">
<div id="main-body-wrapper">
<p class="caption" style="position:absolute;">
<span class="captionspan"></span>
</p>
</div>
</li>
<li><img src="http://www.pressrecord.com.au/wp-content/uploads/2013/02/example.png" alt="">
<div id="main-body-wrapper">
<p class="caption" style="position:absolute;">
<span class="captionspan"></span>
</p>
</div>
</li>
</ul>
</div>
</div>
Here Fiddle: http://jsfiddle.net/Anee/s673j/1/
Add this to css:
blockquote {
position:absolute;
}
blockquote:after{
content: "\201D";
margin-right: -2.75em;
}
Not sure, why you have p class caption in the middle. you might want to remove it.
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;
}