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
Related
I have a problem on making CSS to fill remaining width space. I've tried so many other answers in stackoverflow and the same problem occur, the div keeps on breaking into a new line. Here's my code:
http://jsfiddle.net/YSLJX/
I've tried these but nothing works...
width: 100%
width: available
width: auto
You can simplify your html, float the image element left (u_img) then apply overflow hidden to the second element (u_msg), this will 'tell' it to apply block level behaviour and stretch to the remaining space.
Demo Fiddle
HTML
<div id="chat" style="height: 350px;">
<div class="u_img">
<img src="https://lh3.googleusercontent.com/-g_zvhql17tw/AAAAAAAAAAI/AAAAAAAAARE/xQMDsE3q_K0/w48-c-h48/photo.jpg"" />
</div>
<div class="u_msg"><span class="post_time">Tue May 6 13:52:34 2014</span><span class="u_name"><b>Qixster</b>:</span><span id="msg_container" style="color: #000;font-size: 16px;">test</span>
</div>
</div>
CSS
#chat {
width: 100%;
height: 100%;
overflow:hidden;
border: 1px solid #c0c0c0
}
.msg {
border: 1px solid #c0c0c0;
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
}
.u_img {
float: left;
max-height: 48px;
}
.u_msg {
padding-left: 5px;
font-family:'Ubuntu', sans-serif;
word-wrap: break-word;
overflow:hidden;
}
.u_name {
float: left;
}
.post_time {
float:right;
right:0px;
color:#c0c0c0;
font-size:10px;
}
The alternative would be to apply a display:table structure
i've been looking around to fix this, i havent seen a good answer on why this happens and how i can fix it..
basically i have a div that i set to 100% width and height, inside i have like a tabs section like on a broswer, i added a margin and padding to the main area, and when i set the tabs div to full width it sticks out some pixels, whats the correct way to deal with child divs sticking out of parents divs when playing with %'s and margins/padding
<div class="appview_fullscreen app_ama">
<center><strong>AMAMAMAMAMAMA</strong> </br>
<i>AMAMAMA</i>
</center>
<div class="main_area">
<div class="tabs_area">
</div>
<div class="main_window">
</div>
<div class="troubleshoot_area">
</div>
<div class="timeline">
</div>
</div>
</div>
.appview_fullscreen
{
width: 100% !important;
height: 100%;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
}
.app_ama
{
}
.main_area
{
border: 1px solid green;
width: 100%;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
width: 100%;
}
demo : http://jsfiddle.net/S8RC3/
By simply removing 100% from the DIV elements.
DEMO
.main_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
height: 20px;
}
DIV as being a Block level element is already wide as it's parent container.
Additionally you have a typo: </br> should be <br />, <br/> or <br>
For your padding and border, use box-sizing: border-box;.
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
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;
}
I'm trying to get my page to occupy 100% of the screen, with a footer, which needs to always be on the bottom of the page.
The div's should expand when the page resizes, with the right background color.
The bugs I have at the moment are :
- Footer stays at bottom of the screen not of the page.
- div (menu) is bigger than the div (content)
- the div doesn't resize properly
Here's my code:
Div stucture
<div id="container"><br />
<div id="header">CMS</div>
<div id="menu"><?php include ('includes/menu.php');?></div>
<div id="content">
<?php include $include_page?>
</div>
<div id="footer">CMS</div>
</div>
CSS
body {
height: 100%;
color: #0b0b0b;
background-color: #696060;
margin: 0px;
padding: 0px;
font-family: Tahoma, sans-serif;
font-size: 12.5px;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
background-color: #f1f1f1;
border-left: 1px solid #8f8f8f;
border-right: 1px solid #8f8f8f;
height: 100%;
}
#header {
height: 100px;
width: 100%;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
}
#menu {
width: 210px;
background-color: #e0e0e0;
float: left;
padding: 10px 10px 10px 10px;
height: 100%;
}
#content {
width: 750px;
height: 100%;
float: left;
padding: 10px 10px 10px 10px;
}
#footer {
position: absolute;
bottom: 0;
width: 1000px;
height: 20px;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
font-size: 11px;
}
You might be thinking about a sticky footer. A sticky footer sticks to the bottom of the page when there isn't enough content to push it down, but when the content starts overflowing the page, it goes along with it.
To make one, you basically want to wrap everything which is not the footer within a <div> tag, like so:
<div id="wrap">
<div id="header">
...
</div>
<div id="main">
<!-- All you page content goes here -->
</div>
</div>
<div id="footer">
I am a footer.
</div>
Now, for the magic CSS:
html, body
{
height: 100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow: auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear: both;
}
/* Opera Fix */
body:before
{
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;/
}
And on your HTML page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others):
<head>
...
<!--[if !IE 7]>
<style type="text/css">
#wrap
{
display: table;
height: 100%;
}
</style>
<![endif]-->
...
</head>
I'd try putting the content div inside the menu div. That way the menu is always the height of it's content, while content div can push the menu - and it's content down where applicable. Remove the height 100%.
Why pos:abs on the footer? Have you tried relative?
You may want to read this for aligning your footer at the bottom of the screen, regardless of content above; http://www.zymic.com/tutorials/html/effective-footers/