I have a sidebar which is only taking up enough space for the content it contains rather than taking up 100% of the wrapper which contains all elements, the image below should get across what I mean:
Here is some of the code I'm working with:
HTML
<body>
<div id="wrapper">
<div id="top">
...
</div>
<div id="topnav">
<...
</div>
<div id="banner">
<img id="img" src="images/2for20.png" alt="banner1" />
</div>
<div id="subbanner">
...
</div>
<div id="content">
...
</div>
<div id="rightSide">
<p>This is the sidebar</p>
</div>
<div id="footer">
<p>© Copyright 2015 Celtic Ore, All Rights Reserved</p>
</div>
</div>
</body>
CSS
#wrapper
{
width:1000px;
height:100%;
margin:0px auto;
background-color:#efefef;
}
#rightSide
{
float:right;
position:relative;
width:220px;
height:100%;
background-color:#efefef;
}
#rightSide img
{
vertical-align:middle;
}
#rightSide h2
{
padding:10px 0px;
}
#rightSide p
{
padding:10px 0px;
}
#footer
{
width:100%;
padding: 10px 0px;
background-color:#000000;
float:left;
}
#footer p
{
color:white;
text-align:center;
}
This works for me:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
> #wrapper
{
width:100%; //change this to 100%
height:100%;
margin:0px auto;
background-color:#efefef;
}
#rightSide
{
float:right;
position:relative;
width:100%; //Change this to 100%
height:100%;
background-color:#efefef;
}
#rightSide img
{
vertical-align:middle;
}
#rightSide h2
{
padding:10px 0px;
}
#rightSide p
{
padding:10px 0px;
}
#footer
{
width:100%;
padding: 10px 0px;
background-color:#000000;
float:left;
}
#footer p
{
color:white;
text-align:center;
}
Related
links-column:first-child: margin-left:0%
is not triggering, I have the exact same code on another section of the site (rev-column) and this is working so not sure why it doesn't work.
fiddle: https://jsfiddle.net/82hLzm2v/2/
<div class="twelve columns">
<div class="links-section-header"></div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
</div>
.links-column { width: 32%; margin-left:1%; float:left; }
.links-column:first-child { margin-left: 0%; }
}.links-cats-wrap{
display:block;
float:left;
width:100%;
height:400px;
background-color:#fff;
margin-bottom:10px;
border:1px solid #DDDDDD;
Laravel code:
#foreach ($links as $link)
<div class="twelve columns">
<div class="links-section-header">{{ $link->category }}</div>
#foreach ($link->linksitems as $linksitem)
<div class="links-column">
<div class="links-cats-wrap">
<div class="links-cats-img"><img class="u-full-width" src="images/links/{{ $linksitem->img }}"> </div>
<div class="links-cats-link">{{ $linksitem->link }}</div>
<div class="links-cats-desc">{{ $linksitem->text }}</div>
</div>
</div>
</div>
#endforeach
#endforeach
Your first <div class="links-column"> is not the first first child of the parent div.
You need to move <div class="links-section-header"></div> outside <div class="twelve columns">.
Code adapted from your JSFiddle.
/* For devices larger than 550px */
/* Review Columns*/
.rev-column:first-child { margin-left: 0%; }
.rev-column:nth-child(odd){ margin-left: 0%; }
.rev-column { width: 49%; margin-left:2%; float:left; }
/* Links Columns*/
.links-column { width: 32%; margin-left:1%; float:left; }
.links-column:first-child { margin-left: 0%; }
/*Columns*/
.container { width: 100%; height:auto; overflow:hidden; padding: 0 0px; box-sizing: border-box; }
.column,
.columns {
margin-left: 2%;}
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 49%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 68%; }
.nine.columns { width: 76.0%; } /*increased from 74% column margin decreased from 4% to 2%*/
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
.links-wrap{
width:100%;
min-height:400px;
height:auto;
overflow:hidden;
background-color:#f2f2f2;
}.links-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:;
margin: 0 auto;
padding-top:10px;
padding-bottom:10px;
}.links-wrap-wrap{
width:960px;
height:auto;
overflow:hidden;
}.links-section-header{
color:#fff;
width:100%;
height:30px;
line-height: 30px;
background-color:#605860;
margin-bottom:10px;
}.links-cats-wrap{
display:block;
float:left;
width:100%;
height:400px;
background-color:#fff;
margin-bottom:10px;
border:1px solid #DDDDDD;
}.links-cats-wrap:last-child {
margin-right: 0px;
}.links-cats-img{
width:100%;
height:160px;
background-color:;
line-height:40px;
color:#fff;
font-weight:700;
font-size:16px;
}.links-cats-link{
width:100%;
height:60px;
background-color:;
line-height:60px;
font-weight:300;
font-size:16px;
margin: 0 auto;
text-align:center;
}.links-cats-link:hover{
color:#ff0000;
}.links-cats-desc{
width:100%;
height:110px;
padding:20px;
background-color:;
line-height:20px;
}.links-share{
width:300px;
height:30px;
}.links-share-twitter{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#32ccfe;
text-align:center;
}.links-share-facebook{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#3E5B97;
text-align:center;
}.links-share-google{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#F8694D;
text-align:center;
<!-- content -->
<div class="links-section-header"></div>
<div class="twelve columns">
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
</div>
I'm creating a website which seems to work fine with the following method on a desktop computer, but when I test it on an iPad and the content extends over the footer, the footer doesn't get pushed down, but overlaps the content.
My HTML is:
<body>
<div id="wrapper">
<div id="header">
....
</div>
<div id="main">
<div id="mainuser">
<span id="left"><jdoc:include type="component" /></span>
<span id="right"><jdoc:include type="modules" name="position-7" style="xhtml" />
</span>
</div>
</div>
<div id="ft">
...
</div>
</div>
</body>
Here's the CSS:
html {
height: 100%;
padding:0;
margin:0;
}
body{
height:100%;
margin:0;
padding:0;
text-align:left;
}
#wrapper {
min-height: 100%;
position:relative;
}
#main{
width:700px;
background:transparent;
}
#mainuser {
margin-top:40px;
width:700px;
text-align:left;
background:#fff;
}
#left {
float:left;
width: 540px;
}
#right {
float:right;
width:150px;
text-align:left;
background:transparent;
color: #e10000;
margin-right:5px;
margin-top:5px;
}
#ft {
width:100%;
height:60px;
border-top:1px solid #527988;
position:absolute;
left:0;
bottom:0;
}
I also tried to insert a div between the content and the footer with clear:both, but it didn't work.
I am trying to build a website that has three floating columns in the middle of the page. I have a container wrapping around everthing but it will not extend fully. Is there something I am doing wrong?
Thanks
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
#container
{
background-color:#CCC;
min-height:100%;
}
#header
{
background-color: #000;
width:100%;
float:left;
}
#navbar
{
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper
{
background-color:#000;
height: 175px;
}
#colone
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree
{
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
#footer
{
}
You need to clear your float. This is what it looks like.
http://jsfiddle.net/ZT59d/
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
<div id="footer">This is the footer</div>
</div>
#container {
background-color:#CCC;
min-height:100%;
}
#header {
background-color: #000;
width:100%;
float:left;
}
#navbar {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
#colone {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree {
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
.clear
{
clear:both;
}
#footer {
}
If you don't mind, I'm going to give you some suggestions on how to improve your code.
First, you're using HTML5 but you're not using some of the new elements. Let's replace them.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
You're also using ids for everything. Trust me, you don't want to do that. Realistically, you should be using ids sparingly. I'm at the point now that the only time I use an id is if I need to target something with javascript.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div class="column">This is column one</div>
<div class="column">This is column two</div>
<div class="column">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
Here's what you're new css would look like.
body {
background-color:#CCC;
min-height:100%;
}
header {
background-color: #000;
width:100%;
float:left;
}
nav {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
.column {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
.clear {
clear:both;
}
I left #topper in because it's unusual. It's hard for me to tell exactly what you're trying to achieve with it.
Here's the fiddle with everything together.
Easy way to fix this is to add such CSS rules:
#footer
{
clear: both;
}
#container {
overflow: hidden;
}
DEMO
Obviously, you have some problems understanding how float property works. You should investigate it more careful. Especially I would recommend to check out clearfix hack.
Hate to bring another sticky footer question but after hours of looking for answers over the course of two days I give up.
Here's my the page in question: http://aaronisdead.com/sites/kanwakan/kanwakan.html
Here's my HTML architecture
<html>
<head>
</head>
<body>
<header>
<div class="headercenter"><img src="kanwakanheader.png"></div>
</header>
<div class="mainwrap">
<div class="left">
<img src="featonspin.png">
<iframe src="https://player.vimeo.com/video/78659516" width="464" height="257" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="right">
<img src="featoncarson.png">
<iframe src="https://player.vimeo.com/video/86751056" width="464" height="257" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="bandpic">
<img src="bandpic.jpg">
</div>
<div class="text">
</div>
</div>
<div class="wrapper">
<div class="push"></div>
</div>
<div class="footer">
<div id="footwrap">
<div id="leftcol">
<img id="email" src="bottomcontact.png">
</div>
<div id="rightcol">
<img id="andlogo" src="bottomlogos.png">
</div>
</div>
</div>
Annnd here's my CSS.
.mainwrap {
margin-right:auto;
margin-left:auto;
display:block;
width:950px;
top:75px;
height:100%;
}
.right {
position:relative;
width:50%;
margin-right:auto;
margin-left:auto;
display:block;
float:right;
padding:0 0 30 0;
}
.left {
position:relative;
padding-bottom:0px;
width:50%;
margin-right:auto;
margin-left:auto;
display:block;
float:right;
left:10px;
}
/*HEADER*/
.headercenter {
width:375px;
margin-right:auto;
margin-left:auto;
display:block;
}
header {
position:relative;
width:100%;
height:75px;
background:#000000;
}
/*FOOTER STUFF*/
#email, #andlogo {
height:75px;
}
#footwrap {
width:950px;
height:75px;
margin-right:auto;
margin-left:auto;
display:block;
}
#leftcol {
float:left;
width:50%;
}
#rightcol {
float:right;
width:50%;
}
/*ABSOLUTELY NECESSARY PAGE PROPERTIES*/
body {
background-image:url("background.jpg");
background-attachment: fixed;
background-height:100%;
background-repeat:repeat;
background-position:center;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -75px;
}
.footer {
width:100%:
position:absolute;
background:#000000;
z-index:999;
}
.footer, .push {
height: 75px;
}
I'm not sure what's causing this; I've included a lot of information because of this. If you're taking the time pour through all this you would be helping me in a very big way in understanding sticky footers, a skill I'll be able to use as a web developer forever. Thank you.
Remove height: 100% from .mainwrap and move it inside the .wrapper.
I have a menu bar at the top of an application with 3 sections. Icons on the left, Icons in the center, and an icon on the right. I can easily float left and float right the respective sections, but I don't know how to float a center section.
I have attached screen shots of the desired outcome, and what I am currently getting.
The problem is that the number of icons in the left and center sections will change all the time.
This is my Desired outcome
vs
My actual Outcome
I am using the same icons in my example, but the left is in the correct place, the logout button is on the correct side, but pushed down, the middle section is all screwed up.
Thank you for any help.
<body>
<div id="content">
<div id="menuBar">
<div id="menuBarContent">
<div class="homeIconDiv menuBarHardIconDiv floatLeft">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div class="backIconDiv menuBarHardIconDiv floatLeft">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div class="menuBarSoftIconDiv">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div class="menuBarSoftIconDiv">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div id="logoutIconDiv" class="floatRight">
<img class="logoutIcon" src="images/icons/logoutButton.png" />
</div>
</div>
</div>
<div id="mainContent" class="clear">
</div>
</div>
html
{
height:100%;
}
body
{
height:100%;
margin:0;
padding:0;
font-family: 'Montserrat', sans-serif;
}
.MSIQtextbox {
border: 1px solid #67AE3D;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
outline:0;
height:35px;
width: 375px;
padding-left:10px;
padding-right:10px;
}
.floatLeft
{
float:left;
}
.floatRight
{
float:right;
}
.center
{
text-align:center;
margin:0 auto;
}
.clear
{
clear:both;
}
#content
{
height:100%;
}
#menuBar
{
position:fixed;
top:0;
background-color:rgba(211,211,211,0.9);
height:64px;
box-shadow: 0px 2px 1px #888888;
margin-bottom:3px;
z-index:10000;
width:100%;
}
#menuBarContent
{
width:1020px;
margin: 0 auto;
}
#mainContent
{
width:1020px;
min-height:630px;
margin-left:auto;
margin-right:auto;
height:100%;
padding-top:3px;
}
.optionsDiv
{
color:White;
}
.menuBarHardIconDiv
{
height:64px;
width:64px;
border-right:1px solid #858585;
}
#logoutIconDiv
{
height:64px;
}
.menuBarHardIconDiv:hover
{
background-color:#F5F0E0;
box-shadow: 0px 0px 0px #888888;
}
img.menuBarIcon
{
position:relative;
top:50%;
left:50%;
margin-top:-12px;
margin-left:-12px;
}
img.logoutIcon
{
position:relative;
top:50%;
margin-top:-12px;
}
.center {margin-left:auto; margin-right:auto;}