for the life of me i cant figure this out...
how can i get 2 columns to float in my footer:
<footer>
<div id="footerWrap">
<div id="footerLeft">
left col
</div>
<div id="footerRight">
right col
</div>
</div>
</footer>
and my CSS:
footer {
background: url("../images/50x50white-bg.png") repeat scroll 0 0 transparent;
clear: both;
}
#footerWrap {
margin: 0 auto;
padding: 20px;
width: 960px;
}
#footerLeft {
border-right: 1px solid #000000;
width: 349px;
float:left;
}
#footerRight {
border-right: 1px solid #000000;
width: 609px;
float:left;
}
You're probably experiencing a problem because #footerLeft and #footerRight are too wide. The wrapper is 960px with 20px of padding on either side, leaving only 920px. The width of your two footer elements is adding up to 960. You need to remove the horizontal paddng on #footerWrap or decrease the width of each of your footer elements by 20.
/* Then simply: */
#footerRight, #footerLeft {
float: left;
}
/* and potentially a simple clearfix: */
#footerWrap {
overflow: hidden;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
How do I get the following setup with CSS to work?
jsfiddle
http://jsfiddle.net/16ex38mL/2/
Basically, I intend to put an input box to #header-nav-content-search and let the div and the one below it resize responsively to 100% of the remaining width.
I have two static width columns. One is the first one with 240px, and one is the last one with 200px.
code
#header-nav-content-search {
width: 100%;
}
didn't do the trick.
I have concentrated on reducing the HTML markup needed. The following example is mainly based on that excellent sketch of yours, so it will need some tweaking.
Basic Idea
Create a three "column" CSS table with the center cell remaining fluid:
<div class="table">
<div class="cell"></div>
<div class="cell center">I contain 4 fluid divs with the class ".inner"</div>
<div class="cell"></div>
</div>
The center cell contains your 4 inner boxes with the class .inner
Basic CSS Styles
box-sizing: border-box will allow us to calculate percentage width including padding and borders
The main container, .table, is given a fixed height (could be changed to percentage)
The .inner divs are display: inline-block and are given appropriate percentage widths and fixed heights equal to half the containers height
The left and right columns are given their fixed widths
.table is given an appropriate min-width to prevent the inner divs from overlapping
Note: In the HTML markup, the inner divs closing and opening tags have no space between them. This is important as it prevents a gap that is present with inline elements.
Refer to this article for more information.
CSS / HTML / Demo
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
}
.table {
display: table;
height: 300px;
width: 100%;
min-width: 600px;
table-layout: fixed;
}
.cell {
display: table-cell;
vertical-align: top;
}
.left {
width: 240px;
}
.right {
width: 200px;
border-left: solid 1px #000;
}
.inner {
display: inline-block;
height: 150px;
vertical-align: top;
}
.center-left {
width: 30%;
}
.center-right {
width: 70%;
}
/* Borders */
.table {
border: solid 1px #000;
}
.inner {
border-bottom: solid 1px #000;
border-left: solid 1px #000;
}
.center-right .inner {
border-right: solid 1px #000;
}
.inner:nth-child(3),
.inner:nth-child(4) {
border-bottom: none;
}
<div class="table">
<div class="cell left">
240px width
</div>
<div class="cell center">
<div class="inner center-left">
30% width 50% height
</div><div class="inner center-right">
70% width 50% height
</div><div class="inner center-left">
30% width 50% height
</div><div class="inner center-right">
70% width 50% height
</div>
</div>
<div class="cell right">
200px width
</div>
</div>
I wouldn't do it that way. Here's one way to get you started.
DEMO: http://jsbin.com/faveca/1/
http://jsbin.com/faveca/1/edit
HTML:
<header>
<div class="fixed-width-240 eq">
240px column fixed width what about is it equal to the others, yes it is.
</div>
<div class="fluid eq">
fluid column
</div>
<div class="fixed-width-200 eq">
200px column
</div>
</header>
CSS
body,
html {
margin: 0;
padding: 0;
}
header div,
header div:before,
header div:after {
box-sizing: border-box
}
header {
border: 2px solid #000
}
header:after {
content: "";
display: table;
clear: both;
}
.fixed-width-240 {
z-index: 1;
position: relative;
background: red;
}
.fixed-width-200 {
z-index: 2;
position: relative;
background: orange;
}
.fluid {
position: relative;
z-index: -1;
background: #ccc;
}
#media (min-width:700px) {
header {
overflow: hidden
}
header .eq {
padding-bottom: 99999px;
margin-bottom: -99999px;
}
.fixed-width-240,
.fixed-width-200 {
float: left
}
.fixed-width-240 {
width: 240px;
width: 240px;
margin-right: -240px;
border-right: 2px solid #000;
}
.fixed-width-200 {
float: right;
z-index: 2;
width: 200px;
margin-left: -200px;
border-left: 2px solid #000;
}
.fluid {
float: left;
padding: 0 220px 0 260px;
width: 100%;
}
}
I'm trying for two sections to float aside of the main column on the right side. The sections should be of a fixed width and the main should be fluid. This is the closest I have come. Problem is that the main does not change its size. If it where one aside section I had used the holy grail, but that doesn't work either.
[edit]To clarify; the HTML cannot be changed (much). Left and right need to stay after main which is best for screen readers and seo. The asides are actually the left and right column if content is wide enough. So only specific widths get this layout I am trying to achieve.[/edit]
https://jsfiddle.net/TR2SD/1/
<div id="container">
<div id="main">
main contents<br>with some content
</div>
<aside id="left">
left contents
</aside>
<aside id="right">
right contents
</aside>
</div>
and the CSS:
#container {
border: 1px solid red;
width: 100%;
}
#main {
border: 1px dotted #f0f;
margin: 0 -240px 0 0;
position: relative;
width: 100%;
float: left;
}
#left {
background-color: #0ff;
}
#right {
background-color: #ff0;
}
#left,#right {
float: left;
width:220px;
position: relative;
z-index:2;
}
For one sidebar, you can position in by accounting for its width using padding on the container and a margin on the main section:
.container {
padding-right: 200px; /* Matches sidebar width */
overflow: hidden;
}
.main {
width: 100%;
float: left;
}
.sidebar {
width: 200px;
margin-right: -200px; /* Matches sidebar width */
float: right;
}
For a left and right sidebar with a scaling center you can use a similar technique:
.container {
padding-right: 200px;
padding-left: 200px;
overflow: hidden;
}
.main {
width: 100%;
float: left;
}
.left-sidebar {
float: left;
width: 200px;
margin-left: -200px;
}
.right-sidebar {
float: left;
width: 200px;
margin-right: -200px;
}
.left-sidebar, .right-sidebar {
display: none;
}
Here's the final result on JSBin. You'll need to resize the page to see the different views.
Note that an auxiliary sidebar for small screens was used in the example above as it is inordinately difficult to use CSS to render elements out of DOM order.
I finally answered it by utilizing an inside element of the #main. What I need to check is compatibility of this fix. And what haapens to the backgrounds assigned to #main.
https://jsfiddle.net/TR2SD/5/
I added an "inside" element
<div id="container">
<div id="main">
<div class="inside">
main contents<br>with some content
</div>
</div>
<aside id="left">
left contents
</aside>
<aside id="right">
right contents
</aside>
</div>
And the css floats everything with some corrections.
#container {
border: 1px solid red;
width: 100%;
}
#main {
background-color: #f0f;
margin-left: -240px;
width: 100%;
float: left;
}
#main .inside {
margin-left: 240px;
}
#left {
background-color: #0ff;
}
#right {
background-color: #ff0;
}
#left,#right {
float: left;
width:240px;
}
In order to locate your divs as you are requiring you should:
Position divs left and right floating right
For the div you named left to be placed to the left of right , you must declare right before left and lastly main which does not require to be positioned relative
The container should declare a min width to prevent the break of the lay out.
So HTML should be a sort of...
<div id="container">
<aside id="right">
right contents
</aside>
<aside id="left">
left contents
</aside>
<div id="main">
main contents<br>with some content
</div>
</div>
And CSS should be
#container {
border: 1px solid red;
width: 100%;
min-width:600px;
}
#main {
border: 1px dotted #f0f;
margin: 0 -240px 0 0;
}
#left {
background-color: #0ff;
}
#right {
background-color: #ff0;
}
#left,#right {
float: right;
width:220px;
}
From here onwards, adjust as your will
A fiddle here
How come when I float #main div to the right, the right border doesn't line up with the right border of the header div?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
#header {
width: 960px;
height: 70px;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
}
#leftcol {
width: 250px;
height: 500px;
border: 1px solid black;
float: left;
margin-right: 20px;
}
#main {
width: 686px;
height: 500px;
border: 1px solid black;
float:right;
}
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="leftcol">
</div>
<div id="main">
</div>
</div><!--end wrapper-->
</body>
</html>
As #alfonso pointed out, borders are increasing the actual size of your divs.
It's good practice to use box-sizing: border-box on all the elements with borders, so that the borders go inside. Alignment becomes MUCH easier.
You forgot to consider the border width of the header.
In total, your header's width is 960px + 2px from the border = 962px, while the main content plus the sidebar have a width of 960px.
If you set the header's width to 958px, both divs align.
Here's a reference to the CSS box model to help you do the math: CSS box model
I am trying to implement a sticky footer for a site i'm working on (see here). I attempted to follow the guide on CSS Sticky Footer - specifically, this implementation.
This is working perfectly in Firefox (13) but in Chrome (21) and IE (9) the #footer is pushed further down the page adding a vertical scroll bar. I assume this is something to do with the use of padding and margins inside my #wrapper - however I am unable to put my finger specifically on the issue. I would really appreciate some help.
The site structure:
<html>
<div id="wrapper">
<div id="header"></div>
<div id="menu"></div>
<div id="page"></div>
</div>
<div id="footer"></div>
</html>
and the relevant CSS:
#wrapper {
min-height: 100%;
width: 100%;
}
#header {
background: url("/images/backgrounds/transparent.png") transparent;
border-bottom: 2px solid #EF7C31;
height: 44px;
margin: 0 auto 20px;
width: 960px;
}
#menu {
background:#FFFFFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
height: 60px;
margin: 0 auto 20px;
padding: 10px 20px;
width: 920px;
}
#page {
background: #FFFFFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin: 0 auto 30px;
overflow-x: hidden;
overflow-y: auto;
padding: 20px 20px 30px;
width: 920px
}
#footer {
background: url("/images/backgrounds/transparent.png") transparent;
border-top: 2px solid #EF7C31;
clear: both;
height: 116px;
margin-top: -158px;
overflow: auto;
padding: 20px;
position: relative;
}
Thank you
Add this line to the wrapper:
overflow: hidden;
So you would have:
#wrapper {
min-height: 100%;
width: 100%;
overflow: hidden;
}
Alternatively add a push div just before the footer. This will push the footer down.
I noticed a few things that were causing some issues. The tutorial you linked to is marked as malicious here at work so I have always used Ryan Fait's CSS Sticky Footer Tutorial.
Checking what you have off of that I noticed a few differences. First of all, you need to set the html body and height as 100% for this to work in all browsers. Secondly, your padding and your border were causing issues, so I created another div that would contain the specific content within your footer and would have the padding and the border css included on it.
HTML:
<html>
<div id="wrapper">
<div id="header"></div>
<div id="menu"></div>
<div id="page"></div>
<div class="push"></div>
</div>
<div id="footer">
<div class="footerContent"></div>
</div>
</html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width:100%;
margin: 0 auto -158px; /* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
height: 158px; /* .push must be the same height as .footer */
}
.footerContent {
border-top: 2px solid #EF7C31;
padding:20px;
}
Live DEMO
<style type=text/css">
#container {
height:30px;
width:100%;
}
.left.button {
float:left;
width:60px;
}
.right.button {
float:right;
width:60px;
}
.middle.indicators {
height:30px;
}
.middle div{
display: inline-block;
margin: 10px 2px;
}
.circle {
background: rgb(102,102,102);
border: 1px solid #FFF;
border-radius: 50% 50% 50% 50%;
height: 7px;
width: 7px;
}
</style>
I have 3 divs in a container. I want to push the left button div left and the right button div right and have the middle indicators div in the center. The issue is the middle div needs to be dynamic width since the number of circle divs inside changes dynamically based on other variables. There could be 3 circles or 5 or 10. I need the middle div to stay centered and also be able to expand based on the number of circle divs inside.
<div id="container">
<div class="left button"></div>
<div class="middle indicators">
<div class="circle></div>
<div class="circle></div>
<div class="circle></div>
</div>
<div class="right button"></div>
</div>
I would change the CSS a little to get things like this jsFiddle example (div borders added to make visualizing them easier). By giving the middle indicators div a left and right margin slightly larger than the width of the left and right button divs, you allow it to float up between the two and take up as much space as possible.
CSS:
div {
border: 1px solid #999;
}
#container {
height: 30px;
width: 100%;
}
.left.button {
float: left;
width: 60px;
}
.right.button {
float: right;
width: 60px;
}
.middle.indicators {
height: 30px;
text-align:center;
}
.middle {
margin: 0 70px;
}
.circle {
background: #666;
border: 1px solid #FFF;
border-radius: 50% 50% 50% 50%;
height: 7px;
width: 7px;
display: inline-block;
}