I seem to be having a problem with my footer growing to 100% width of the page. Currently when it expands there is a gap on each side of the footer. I tried putting the footer outside the the wrapper and inside and pretty much get the same results. I've attached my code to see if anyone can spot what im doing wrong.
<div id="wrapper"> <!--Begin Wrapper -->
<div id="riaandoviwrap">
<div id="riaandovi">Ria And Ovi</div>
</div>
<div id="slideshowwrap">
<div id="slideshow"><img src="images/DSC00495.JPG" /></div>
</div>
<div id="slideswrap">
<div id="slide1">SLIDE 1</div>
<div id="slide2">SLIDE 2</div>
<div id="slide3">SLIDE 3</div>
</div>
<hr />
<div id="contentwrap">
<div id="content"></div>
</div>
<div id="footerwrap">
<div id="footerleft">© 2012 Ria and Ovi</div>
<div id="footerright">Share this on:</div>
</div>
</div> <!--End Wrapper -->
body {
background: #f7f6f6;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#wrapper {
width: 100%
}
#riaandoviwrap {
width: 300px;
min-height: 150px;
}
#riaandovi {
font-family: Script;
font-size: 75px;
}
#slideshowwrap {
width: 950px;
background: url(../images/slider-bg2.png);
clear: both;
}
#slideshow {
min-height: 350px
}
#slideswrap {
width: 950px;
min-height: 100px;
background: #09F;
margin-top: 6px;
clear: both;
}
#slide1 {
width: 300px;
float: left;
}
#slide2 {
width: 300px;
float: left;
}
#slide3 {
width: 300px;
float: left;
}
#contentwrap {
}
#content {
}
#footerwrap {
min-height: 105px;
background: url(../images/footer-bg.png);
margin: 0px;
}
#footerleft {
width: 350px;
float: left;
}
#footerright {
width: 350px;
float: left;
}
hr {
max-width: 950px
}
img {
border: 5px solid #FFF
}
Set padding and margin to zero for the body tag. Althought you're not setting one manually, browsers do have a default padding/margin.
Include a reset sheet in your document to reset all of those default styles. Recommend Eric Meyer's since its more complete:
http://meyerweb.com/eric/tools/css/reset/
Related
I need to put a sidebar on the left of the content.
I had this html:
<div class="sidebar"></div>
<div class="content"></div>
and I solved using:
.sidebar{
width: 280px;
float: left
}
.sidebar + .content{
margin-left: 300px
}
For this example: https://jsfiddle.net/VixedS/fcx2aLLa/
But now my that .content comes before the .sidebar,
<div class="content"></div>
<div class="sidebar"></div>
how can I obtain the same result just using css?
I don't want to loose the remaining space of the body for the width of .content with or without .sidebar.
So please remember that before saying to float the .content to right. Also, I don't know which page has a .sidebar.
This solution is very powerfull. Works for every browser, any device. Also a great way for responsive design and for a third column.
Update:
.container {
overflow:auto;
}
.sidebar {
width: 280px;
float: left;
background: #EEE;
margin-left: -100%;
}
.content {
float: left;
width: 100%;
}
.center {
margin-left: 280px;
}
.container > div:only-child > div.center {
margin-left: 0;
}
<div class="container">
<div class="content">
<div class="center">
Spaghetti
</div>
</div>
<div class="sidebar">
Pizza
<br /> Hobby
</div>
</div>
Do following way. Use float:right to sidebar and display:table to it's parent.
body {
display: table;
}
.content {
float: right;
}
.sidebar{
width: 280px;
float: left;
background:#EEE; // just for this example
}
.sidebar + .content{
margin-left: 300px
}
<div class="content">Spaghetti</div>
<div class="sidebar">Pizza <br /> Hobby</div>
Flexbox...means you don't have to use floats...and you can re-order the elements as you require.
Support is IE10 and up.
body {
display: flex;
}
.sidebar {
width: 280px;
background: #aaa; // just for this example
order: 0;
}
.content {
flex: 1;
order: 1;
background: plum;
}
<div class="content">
Spaghetti</div>
<div class="sidebar">Pizza
<br />Hobby</div>
I'm trying to build a template using divs.
A top div width 100%, no problem there.
Beneath that on the left and the right a small div both 200px
in between the main container consisting of two of columns both 50% of what is left.
My problem is these two colums get the size of 50% of the viewport, so the second column is placed under the main view.
HTML:
<div id="top">
<div class="but">top 1234</div>
<div class="but">top 5678</div>
<div class="but">top 91011</div>
<div class="but">top 121314</div>
</div>
<div id="middle">
<div id="butsRight">
<div class="butv">right1234</div>
<div class="butv">right567</div>
<div class="butv">right8910</div>
</div>
<div id="butsLeft">
<div class="butv">left1234</div>
<div class="butv">left5678</div>
<div class="butv">left91011</div>
</div>
<div id="middleMain">
<div id="middleMainL">
<div id="middleMainLb">LEFT QQQQQ
<br>CCCCC
<br>hhhhhh</div>
<div id="middleMainLm">
<table width=100% height=100% border=2>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="middleMainLo">LEFT
<p>eee</p>
<p>fff</p>
<p>ggg</p>
<p>hhh</p>
</div>
</div>
<!--middleMainL -->
<div id="middleMainR">
<div id="middleMainRb">RIGHT QQQQQ
<br>CCCCC
<br>hhhhhh</div>
<div id="middleMainRm">RIGHT
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
<p>dddd</p>
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
</div>
<div id="middleMainRo">RIGHT
<p>eee</p>
<p>fff</p>
<p>ggg</p>
<p>hhh</p>
</div>
</div>
<!--middleMainR -->
</div>
<!-- middlemain -->
</div>
<!-- middle -->
CSS:
body, html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#top {
margin-right: 80px;
background-color: green;
width: 100%;
text-align: center;
}
.middle {
width: 100%;
height: 100%;
background-color: yellow;
}
#butsLeft {
height: 100%;
width: 200px;
float: left;
background-color: green;
}
#butsRight {
height: 100%;
width: 200px;
float: right;
background-color: green;
}
#middleMain {
background-color: gray;
width:100%;
height:100%;
}
#middleMainL {
width:50%;
float: left;
background-color: black;
}
#middleMainR {
width:auto;
float: left;
background-color: brown;
}
#middleMainLb {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
#middleMainLm {
width: 100%;
float: center;
background-color: purple;
text-align: center;
overflow: visible;
}
#middleMainLo {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
#middleMainRb {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
#middleMainRm {
width: 100%;
float: center;
background-color: purple;
text-align: center;
}
#middleMainRo {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
div.but {
text-align: center;
width: 200px;
background-color: orange;
position: absolut;
display:inline-block;
}
div.butv {
text-align: center;
width: 200px;
background-color: orange;
position: absolut;
height: 33%;
}
Right, I had a little look at it and this is what I came up with. Please do look into it a little to understand the code. Its fairly straight forward.
HTML:
<div id="header">Header</div>
<div id="right">Right Side Bar: Fixed width.</div>
<div id="left">Left Side Bar: Fixed width.</div>
<div id="content">
<div>
<div id="middleleft">Middle Left</div>
</div>
<div>
<div id="middleright">Middle Right</div>
</div>
</div>
CSS:
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
* {
box-sizing:border-box;
}
#header {
width: 100%;
height: 100px;
background: red;
}
#right, #left {
width:200px;
height: 500px;
float:left;
background:orange;
}
#right {
float:right;
}
#content {
overflow:hidden;
height: 500px;
}
#content > div {
width: 50%;
height: 100%;
float:left;
}
#middleleft {
float:left;
height:100%;
width:100%;
background: blue;
}
#middleright {
float:left;
height:100%;
width:100%;
background: green;
}
DEMO HERE
I don't know why I did it, but this is what you want (maybe? 'cause I didn't really understood the question)
http://jsfiddle.net/KTd8T/1/
When you were doing your css, you were doing some .example when example was a div. If it's a div, put #, if it's a class put "."
Now you can work on this copy and just try to write clear code.
There is another point: you are doing a top, and middle content, but you don't have a bottom content. Maybe this is why it's not display like you want ?
Thanks for editing your post and try to be more explicite !
Im using a set of layers, with this CSS
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.eventCat {
float: right;
width: 5px;
height: 100px;
}
to make inline divs. however, when i add a layer that i wish to be align to the right, it seems to fall below (the green one .eventCat). It should be at the right hand side of the red box! even with float:right; what am i missing?
I made a fiddle.. http://jsfiddle.net/7GBca/ to fiddle with :)
It is not floating correctly because .float2 is not floted, my guess is you want it to expand to fill all available width and that's why you didn't set an explicit width. One solution to align .eventCat correctly would be to use position:absolute; and use right:0;
.wrapper {
position: relative;
}
.eventCat {
position: absolute;
right: 0;
top: 0;
width: 5px;
height: 100%;
}
.left2 {
padding-right: 5px; /*set this to the width of .eventCat so it does not overlap*/
}
Example fiddle
you are missing "width: ...px" and "float: left" of 'left2' and "width: ...px" of 'wrapper'.
The easiest way to fix this is set a negative top margin to your green div:
.eventCat {
margin: -100px 0 0 0;
float: right;
width: 5px;
height: 100px;
}
Example Fiddle
Your issue is fixed, please check the code here:
<style type="text/css">
.eventCat {
float: right;
width: 5px;
height: 100px;
}
.eventIMG {
float: left;
left: 0;
width: 100px;
height: 100px;
}
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.set:hover {
background-color: #FFDEAD;
cursor: pointer;
cursor: hand;
}
#event.title {
font-size: 21px;
font-weight: bold;
color: black;
text-decoration: none;
}
#event {
color: black;
}
</style>
and here is your HTML
<div class="wrapper">
<div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
<div class="left1">
<div style="text-transform: uppercase;">WED 18.09</div>
<div style="text-transform: uppercase;">kl.22.00</div>
</div>
<div class="eventCat" style="background-color:green;"></div>
<div class="left2" id="event">
<div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
<div></div>
<div class="">
<p>something here</p>
Find out more » </div>
</div>
</div>
<div class="wrapper">
<div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
<div class="left1">
<div style="text-transform: uppercase;">WED 18.09</div>
<div style="text-transform: uppercase;">kl.22.00</div>
</div>
<div class="eventCat" style="background-color:green;"></div>
<div class="left2" id="event">
<div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
<div></div>
<div class="">
<p>something here</p>
Find out more » </div>
</div>
</div>
What you have to do there is to replace you div.eventCat with div.left2 that's it :-)
Fiddle : http://jsfiddle.net/KRU9U/
Cheers
Put the eventCat (the element you want to float to the right) as the first element under wrapper.
What I want to do is have a <div> with a container class and a fixed width, holding a <div> with the block class to prevent other content encroaching on any uneven blank space, then two columns (<div>'s) side-by-side inside the block, and to be 50% of the width of the block.
When I create this, I get what appears to be a margin after the first block, which I do not want. I want the block to pack up tight, no margins.
I have an example here of what I have so far, and here if the code:
<html>
<head>
<title>Columns</title>
<style>
div {
margin: 0;
padding: 0;
}
.container {
background: #DDD;
width: 1200px;
margin: 0 auto;
padding: 2% 0;
}
.block {
background: #555;
width: 100%;
display: block;
}
.col {
width: 49%;
display: inline-block;
background: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
</div>
</div>
</body>
</html>
Your problem is being causes by inline-block, using this makes a space appear inbetween.
Try using float:left to get around this:
See on jsFiddle
.col {
width: 50%;
float: left;
box-sizing: border-box;
background: #333;
}
Note that I added, box-sizing:border-box; this means when you use padding it will be included in the width, not on top of it. Effectively enabling the use of it without an extra inner div.
Remember to include a clear fix afterwards also to "clear" the floats.
CSS
.clear {
clear:both;
}
HTML
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
<div class="clear"></div>
</div>
Try replacing these classes:
.block {
background: none repeat scroll 0 0 #555555;
display: block;
overflow: auto;
width: 100%;
}
.col {
width: 49%;
float: left;
background: #333;
}
.container {
background: #DDD;
width: 900px;
margin: 0 auto;
padding: 30px 30px 30px 30px;
}
.block {
background: #555;
width: 100%;
display: block;
}
.block:after {
content: "";
display: table;
clear: both;
}
.col {
width: 50%;
float: left;
background: #333;
}
I would like to try to build a clean and nice piece of code where I can accomplish the result you see in the image below. It's ok in Firefox, Chrome or Safari, but not in IE.
I created a JSFiddle with the code.
Basically all I want a 100% width of the red bar (edge to edge in the window) but the content (including the navigation) should be limited in width.
So I'm looking for a nice, clean snippet to make this work in all browsers (including IE...)
<style>
body{
background-color: #fff;
margin: 0;
padding: 0;
}
#subtopContainer{
background-color: #f00;
}
#subtop, #header, #content{
width: 980px;
margin-left: auto;
margin-right: auto;
}
#header{
height: 150px;
}
#subtop{
height: 50px;
}
</style>
<div id='container'>
<div id='headerContainer'>
<div id='header'></div>
</div>
<div id='subtopContainer'>
<div id='subtop'></div>
</div>
<div id='contentContainer'>
<div id='content'></div>
</div>
</div>
<style>
body { background-color: #fff; margin: 0; padding: 0; }
div.wrapper { margin: 0 auto; width: 980px; background: lime}
div.header { height: 70px; margin-bottom: 40px;}
div.content { height: 400px; }
div.bar { height: 40px; background: #f00; overflow: hidden; position: absolute; top: 70px; width: 100%;}
</style>
<body>
<div class="bar"></div>
<div class="wrapper">
<div class="header">
Header Stuff
</div>
<div class="content">
In order for this to work,
div.bar 'top' = div.header 'height'
div.header 'margin-bottom' = div.bar 'height'.
</div>
</div>
</body>