I'm having a problem with setting the height of <div> tags using CSS.
I'm using the following CSS & HTML code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
div
{
display:block;
}
#ph_container
{
margin:0 auto;
width:980px;
height:auto;
border: 1px solid #00CC33;
clear:both;
background: #F0F0F0;
}
#cp_search
{
height:100px;
clear:both;
margin:10px 0px 0px 0px;
border: 1px solid #0099FF;
}
#cp_search_ex
{
clear:both;
background:none;
margin-top:5px;
margin-left:27px;
}
#cp_search_tx
{
width:210px;
float:left; /*try here whitout float and see the difference that I want to get*/
margin:0px;
background:none;
}
.txtx
{
color: #000000;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
</style>
<body>
<div id="ph_container" class="space">
<div id="cp_search">
<div id="cp_search_ex" class="space">
<div id="cp_search_tx" class="txtx" >SEARCH</div>
</div>
</div>
</div>
</body>
</html>
My problem is that the parent div id="cp_search_ex" doesn't get the height of the div id="cp_search_tx" which is inside it, it has the height: 0px.
I want the div id="cp_search_ex" to take the height from the div id="cp_search_tx"?
I wrote a comment in the CSS code please follow.
I believe you are describing the problem solved by using a "clearfix".
try adding this to the style for the parent divs (so they wholly-contain their floated children):
overflow:hidden;
pretty complex post - it would help if you could pare it down to a specific example that exhibits the problem you're having.
You have at least one error in your CSS. You've set the height twice...
#ph_container{
margin:0 auto;
width:980px;
height:auto; /* duplicated height */
border: 1px solid #00CC33;
clear:both;
background: #F0F0F0;
height:100%; /* duplicated height */
}
So if you want the parent to take the height of its content, then you need to remove height:100% as that is telling the parent to be 100% of whatever is just outside the parent... in your case, that's 100% of the body's height.
And cp_search_tx cannot expand the size of its container since it's a float:. By definition, floats are outside of the normal content flow and therefore their container elements will appear to be empty.
Add an empty clearing div under the content which forces the container div to dynamically expand.
<div id="cp_search_ex" class="space">
<div id="cp_search_tx" class="txtx" >SEARCH</div>
<div style="clear:both;"></div>
</div>
Alternatively, simply adding overflow:hidden to the container will also force it to expand to encompass any floats.
Use a clearfix method. I usually use
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
* html .clearfix,
*:first-child+html .clearfix {
zoom: 1;
}
Apply the class clearfix to ph_container and see if that fixes it.
The question does not really make much sense, the outer block takes 100px + margin, so it works.
The text element has float defined so it doesn't take space.
Related
I am new to the world of HTML5 and I am trying to build a layout to give me a better understanding on how i can move on from HTML4. I have currently built a layout but wanted to check:
If my code is written correctly (any tips or advice would be really appreciated, as first time I am writing in HTML5 so want to make sure im doing things right)
trying to fix the footer to sit at the bottom of the page, overlapping the sidebar and section2 slightly but at present it is showing across the middle of the page.
I have noticed when viewing the site in Firefox and using Firebug the site does not show up in the exact size that I have defined in the CSS, so would like to understand why this is.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<title>BrightBees Layout</title>
<link href="styles2.css" rel="stylesheet" />
</head>
<body>
<div id ="container">
<header>
<h1>This my Header</h1>
<nav><h2>My Navigation Bar<h2></nav>
</header>
<div id="banners"><h2>My Banners<h2></div>
<aside id="sidebar"><h2>My SideBar<h2></aside>
<section id="content"><h2>This is my section1</h2></section>
<section id="list"><h2>This is my section2</h2></section>
</div>
<footer>
<h3>This is my footer</h3>
</footer>
</body>
</html>
My CSS:
body {
background:#FFF;
}
#container {
margin: 0px auto 0px auto;
width:960px;
border:1px solid #CCC;
}
header {
margin:0;
padding:0px;
text-align:center;
height:166px;
}
nav {
height:65px;
text-align:center;
background:#CCC;
}
#banners {
margin:0;
height:253px;
background:#01AEF0;
text-align:center;
}
#sidebar {
height:600px;
width:310px;
background:#ec8400;
float:left;
text-align:center;
}
#content {
height:300px;
width:650px;
background:#CCC;
float:right;
text-align:center;
}
#list {
height:300px;
width:650px;
background:#01AEEF;
float:right;
text-align:center;
}
footer {
margin:0;
padding:0;
text-align:center;
font-weight:bold;
height:167px;
background:#efefef;
z-index:-1px;
text-align:center;
}
Thanks in advance for looking at this, any advice would be greatly appreciated.
give height to the 'container' in css file should be in 'px'...
example
#container {
margin: 0px auto 0px auto;
width:960px;
border:1px solid #CCC;
height: 600px
}
it should work fine
some steps to to at first:
Remove default browser margin and padding.
* {
margin: 0px;
padding: 0px;
}
Remove margin:0 and padding:0 from .header, .footer and #banner.
use meta viewport tag to make it more responsive:
<head>
<title>BrightBees Layout</title>
<link href="styles2.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Use classes instead of ID's, they're too specific. Leave ID's for JS.
See here for the difference between ID's and classes:
https://css-tricks.com/the-difference-between-id-and-class/
I have added the following to my footer tag in the css file and this overlaps behind the sidebar/section that i required.
margin-top: -80px;
Thanks guys for looking at this for me, really appreciate it.
My centered header bottom margin is overflowing the parent container, causing a gap between yellow and orange wrappers:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.header-wrap{
background-color:yellow;
}
.content-wrap{
background-color:orange;
}
.header{
margin:0 auto 1em auto;
background-color: red;
width:40em;
}
</style>
</head>
<body>
<div class="header-wrap">
<div class="header">header</div>
</div>
<div class="content-wrap">
<div class="content">content</div>
</div>
</body>
</html>
If I use a simple clearfix for parent .header-wrap{overflow:hidden;} the problem is fixed, but I don't understand why I need to use a clearfix here, since I'm not using floating elements at all.
From what I know, the clearfix is applied on the parent to clear any floated children inside, which is not the case here.
Can anyone explain why is this happening?
.header{
margin:0 auto 1em auto; //margin 1em at bottom
background-color: red;
width:40em;
}
change it to
.header{
margin:0 auto;
background-color: red;
width:40em;
}
DEMO
Add float:left or inline-block to your header. Currently in your structure you mentioned the margin-bottom to header div which is inside the header-wrap class. header is the child element. To display yellow background, you must need to wrap the child element.
DEMO
CSS
.header-wrap {
background-color: #FFFF00;
display: inline-block;
}
I have a wrapper with inside a header, a left column and the main content.
Outside the wrapper i got the footer.
My problem is that main content, if there's not enough text, doesn't stretch till the bottom of the page. If i insert lorem ipsum etc, being many rows it's all ok, but if i try with only few rows, the main div stops before the very end of the wrapper (or better, the end of the page, before the footer).
Here's my html code
<?php session_start();
unset($_SESSION['message']);
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/stili.css" type="text/css" />
<script type="text/javascript" src="../script/scripts.js"></script>
<meta charset="utf-8"/>
<title></title>
<style>
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
include('../php/header.php');
?>
</div>
<div id="leftcolumn">
<?php
include('../php/leftcolumn.php');
?>
</div>
<div id="main" >Welcome to our site
...Some text, but not enough to stretch to the end of page...
</div>
<div style="clear: both"></div>
</div>
<div id="footer">Copyright 2013</div>
</body>
</html>
And here's the CSS
html,
body {
padding:0;
margin:0;
height:100%;
}
#wrapper {
min-height:100%;
height:auto;
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
}
#main {
float:right;
width:680px;
padding:10px;
background:#E0CD90;
text-align:justify;
overflow: auto;
}
#main a{
font-size:40px;
}
#footer{
border-top: 2px solid #CCCCCC;
width:950px;
margin:auto ;
height:30px;
background:#ee5;
clear: both;
}
Thanks in advice to everyone that will help finding the problem!
Splitting a page into multiple columns stretching automatically the height of the viewport is an ongoing topic. Just google for that, there are several CSS based solutions around there.
The problem is, that the height of the surrounding boxes are undefined (html, body, wrapper in your case). You may only add some "style" if theres a size on the parent as well.
One weired solution is, to set the style of the html object:
<html style="overflow:hidden;clip:
rect(auto);height:100%;;margin:0px;padding:0px;
background-color:white;">
(yes, it's not forbidden, you CAN do that and it's even IE 6 and 7 proven...)
and
#wrapper {
min-height:100%;
height:100%';
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
overflow: hidden; /* not sure if you want that */
}
Here are the keys to your problem you should look at and implement however you want:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#wrapper, #leftcolumn, #main {
height: 100%;
}
You dont need to add height in wrapper it will get the height based on the content inside a wrapper :)
Is this how you want it to be like? If not, then please let me know and I'll revise my answer.
UPDATE:-
#main {
height:100%
}
#wrapper {
height:100%
}
#leftcolumn {
padding:10px;
height:100%;
}
This should work.
UPDATE 2:-
#main {
height:100%;
}
#wrapper {
height:100%;
overflow:hidden;
min-height:500px; (you can change this to your liking)
}
#footer {
position:relative;
}
This should give you the results you expect. No need to add my previous styling, just use this one now.
I've been struggling for days trying to get a page working with CSS and DIVS. Basically I need a masthead with logo/banner ad at the top, then a three column layout (nav, main content and additional side content), then ending the page with a footer.
I will need to set a background color and put a 1 px border around the three content columns so I have a wrapper div around them. And the three columns may also need there own background colors too.
What I am aiming for is to have each of the three content columns be the same height and grow as required. However, if I add a lot of content to one of them, the content spills out below the footer. I've done lots of searches on this and tried various combinations of height and min-height but still can't get it working.
I have placed HTML (with the CSS in it) at http://solomon.ie/so and screen grabs taken in FF3 on WinXP
The tidied code is also here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body {
height:100%;
}
body, td, p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#content_wrapper{
width: 980px;
margin: 0 auto;
border:1px solid #3300FF;
background:#FFFF66;
min-height:100%;
height:100%;
}
#middlecol{
float:left;
min-height:100%;
height:100%;
background:grey;
width:540px;
}
#leftcol{
float:left;
min-height:100%;
background:green;
width:170px;
}
#rightcol{
float:right;
min-height:100%;
background:#66FFCC;
width:250px;
}
#header_wrapper {
width: 980px;
margin: 0 auto;
border:1px solid #FF0000;
clear:both;
margin-bottom:8px;
}
#footer_wrapper {
width: 980px;
margin: 0 auto;
border:1px solid #000000;
clear:both;
margin-top:8px;
}
</style>
<title>test </title>
</head>
<body>
<div id="header_wrapper"><h1>logo/ad</h1></div>
<div id="content_wrapper">
<div id="rightcol"><h1>RHS column</h1></div>
<div id="leftcol"><h1>LHS</h1></div>
<div id="middlecol"><h1>Main content column</h1></div>
</div>
<div id="footer_wrapper"><h1>footer</h1></div>
</body>
</html>
Try http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
i've used it on various projects and it works extremely well.
There is nothing wrong, content wrapper is 100% of screen, but you have other elements (top, bottom). That means 100% + n px.
Remove header and footer, and you will see for yourself. You should wrap everything in a div, and set height to 100% and overflow:hidden, but this is dangerous.
You also need to add this rule on top, because some elements like body have margin/padding by default.
*{margin:0;padding:0;}
Note that borders add height/width to overall height/width so you will always have vertical scroll even if the border is 1px, thats 100% + 1px
Is there any way to vertically align an image element generated by a "content" property as part of a ":before" selector, next to adjacent inline text? In other words, I have
Share on Facebook
As I don't want to pollute my markup with unnecessary IMG elements that only have to do with style, I resort to adding a small icon to the left of the link, via CSS (except that it does not align properly, hence the question):
a.facebook:before
{
content: url(/style/facebook-logo.png);
}
I tried adding a "vertical-align: middle" (one of the most notoriously difficult aligning concepts to grasp in CSS, in my opinion, is that very property) but it has no effect. The logo aligns with text baseline, and I don't want to hardcode pixel offsets, because frankly text size differs from browser to browser, etc. Is there any solution for this?
Thanks.
Vertical-align only aplies to table-cell elements.
you can add a display:table-cell to "a.facebook"
Personally, instead I'd use a background-image:
HTML:
Share on Facebook
CSS:
a.facebook
{
background-image: url(/style/facebook-logo.png);
background-position: TOP LEFT;
background-repeat:NO-REPEAT;
padding-left:20px; /* or whatever the width of facebook-logo.png is */
}
If you're really married to the idea of using :before then you can use positioning:
a.facebook
{
position:relative;
top:0px;
left:0px;
padding-left:20px; /* or whatever the width of facebook-logo.png is */
}
a.facebook:before
{
content: url(/style/facebook-logo.png);
position:absolute;
top:0px;
left:0px;
}
I'd add a few transparent pixels above (or below) the logo, it's the simplest thing to do with images.
Otherwise you can play with line-height, but I wish you good luck to understand clearly what you're doing ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Aligning generated content vertically</title>
<style type="text/css" media="screen,projection">
a, a:before {
/*display: inline-block;*/
}
a {
vertical-align: super;
line-height: 3;
background-color: yellow;
border-top: 1px solid darkred;
border-bottom: 1px solid red;
}
a:before {
vertical-align: bottom;
line-height: 1;
content: 'bottom :';
}
</style>
</head>
<body>
<div>
<p>Share sth with people you didn't think they'd have access to it</p>
</div>
</body>
</html>
You can uncomment display: inline-block; too
Line-height and a background-image will get you what you want:
CSS:
a.share-on-facebook {
background: url(facebook.png) no-repeat top left;
line-height: 40px; /* height of facebook logo */
padding-left: 40px; /* width of Facebook logo */
}
Mark-up:
<a class="share-on-facebook" href="...">Share on Facebook</a>