I'm trying to brush up on my HTML and CSS again and I was trying to make a simple layout. Here is the HTML/CSS for my simple site.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My website</TITLE>
<META CHARSET="UTF-8">
<style type="text/css">
* {
padding: 0px;
margin: 0px
}
html, body {
margin:0;
padding:0;
height:100%;
border: 0px;
}
#TopBar {
width:100%;
height:15%;
border-bottom:5px solid;
border-color:#B30000;
}
#MidBar {
background-color:black;
height:70%;
width:70%;
margin-left:auto;
margin-right:auto;
}
#BottomBar {
position:absolute;
bottom:0;
width:100%;
height:15%;
border-top:5px solid;
border-color:#B30000;
}
h1 {
font-family: sans-serif;
font-size: 24pt;
}
#HEADER {
text-align:center;
}
li {
display:inline;
}
#copyright {
text-align: center;
}
</style>
</HEAD>
<BODY>
<DIV ID="TopBar">
<DIV ID="HEADER">
<HEADER>
<H1>My website</H1>
<NAV>
<UL>
<LI>About me
<LI>Contact me
<LI>My blog
<LI>My portfolio
</UL>
</NAV>
</HEADER>
</DIV>
</DIV>
<DIV ID="MidBar">
<DIV ID="PhotoSlideshow">
test
</DIV>
</DIV>
<DIV ID="BottomBar">
<FOOTER>
<P ID="copyright">Name here ©
<?PHP DATE("Y") ECHO ?> </P>
</FOOTER>
</DIV>
</BODY>
</HTML>
Given the heights I've applied to my div elements I expected everything to line up nicely however it appears that the bottom div is higher than the intended 15% and overlaps onto the middle div, see here demonstrated by the red border at the bottom...
Where am I going wrong? I'm sure it's something simple.
You should understand how the box model works... You are using borders which are counted outside the element, so for example if your element is 200px in height, and has a 5px border, the total element size will be 210px;
So considering this as the concept, what you are having elements which sums up to 100%, and you are using borders too, so that is exceeding the viewport which will result in vertical scroll...
Also you don't have to use position: absolute;, you are making it absolute, just to avoid scrolls but that's a wrong approach. Absolute element is out of the document flow, and will give weird results if you didn't wrapped inside a position: relative; element.
Demo
Few Tips :
Use lowercase tags
Avoid Uppercase ID's unless required
Using 100% vertically is very rare, designers generally use width: 100%; for making the layouts responsive. So if you don't have any specific reason to go for 100% vertical elements, don't go for it..
Solution:
Still if you want to stick with the vertical layout spanning to 100% in height, you should use box-sizing: border-box; property...
What box-sizing will do here?
Well, using the above property, it will change the default behavior of the box-model, so instead of counting the borders, paddings etc outside the element, it will count inside it, thus it will prevent the viewport to be scrolled.
I will provide you an example, which I had made for another answer.
Demo 2 (Updated, had forgot to normalize the CSS)
Explanation for the above demo, if you look at the CSS, I am using
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
which will make every element paddings, borders etc to be counted inside the element and not outside, if you mark, am using a border of 5px; and still, the window won't get a scroll bar as the border is counted inside the element and not outside.
There are many things a bit off with your code, however the straight forward answer is that borders are part of the box model, therefore part of the height calculation. So the height of your div is 15% of the height + the width of your borders, thus it is oversized.
Please see this explanation of the box model:
http://css-tricks.com/the-css-box-model/
I think it has to do with your borders (each of which is 5px). Since you have your TopBar, MidBar, and BottomBar have percentage heights that add up to %100, WITH additional borders, you have a problem of having an effective height of greater than %100, and then, because you have BottomBar with an absolute position at the bottom, it doesn't force the page to scroll, but simple induces some overlap between the MidBar and BotomBar divs.
Remove "Position: absolute" from: #BottomBar. That should do the trick.
I'm trying to get some nested div tags to auto grow in height depending on the content inside them. A sample code is given here. The middle for example has some more content, but the height doesn't seem to grow. What is the trick to make it auto grow? I took out all the floating elements from inside the parents thinking it might be the CSS clear rule. But that didn't help either. Appreciate any help.
<div id="editmain">
<div class="ticker">
some content here
</div>
<div class="ticker">
some longer content content here
</div>
<div class="ticker">
some content here
</div>
</div>
#editmain
{
position:relative;
min-height:480px;
background-color:#84d;
overflow:hidden;
padding: 20px 0px 30px 0px;
}
.ticker
{
position:relative;
border-bottom: solid 2px #ddd;
margin:10px;
background-color:white;
overflow:hidden;
height:auto;
min-height:100px;
}
In the absolute positioning model, a box is removed from the normal
flow entirely (it has no impact on later siblings) and assigned a
position with respect to a containing block.
w3.org
Remove the absolute positioning and find another way to format your labels and inputs using width and margin. Fiddle
.tickertxtlabel
{
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
I'm working on a little project for fun and ran into some trouble trying to get an image inside a <div> to float on the right side of said <div>. The problem is that it seems to ignore the container (the <div> it's in) and act as if it were part of the parent wrapper. What I want to happen is for the containing element to adjust it's height based on the image inside of it...I guess. Been toying with it but haven't had any luck.
HTML:
<div class="maincontentwrapper">
<!--First body article on page-->
<div class="contentpane">
<img src="images/welcomethumb_small.jpg" alt="" id="infoimg" />
Filler text. This is the only thing that<br />
seems to change the height of this div's<br />
border.
</div>
<!--Second body article on page-->
<div class="contentpane">
Text goes here.
</div>
</div>
CSS Code for all visible classes:
.maincontentwrapper {margin: 10px 333px 10px 10px;}
.contentpane {border: solid 2px red;
margin-bottom: 10px;
padding: 4px 4px 4px 4px;
text-indent: 1em;}
/* Thumbnail for first article on home page.
Margins set to push image to align ignoring the container's
border width and padding width. */
#infoimg {float: right;
width: 145px;
height: 150px;
margin: -6px -6px 4px 4px;}
/* End Main Content Styles */
EDIT: If you need a link to the website for clarification as to what the issue is I can certainly add it.
What I want to happen is for the containing element to adjust it's height based on the image inside of it
You need to clear below the image, like this: http://jsbin.com/iduvof/1/edit
There are several ways to do this, which you can read more about here.
The method that I have used is to add an extra div which has the property clear: both. This is probably not best practice as it's non-semantic markup, but it's easy!
Here is the segment of css:
.imgdiv{
float:left;
padding:0px;
margin:0px 0px 10px 0px;
background-color:yellow;
width:55px;
height:68px;
}
.zheader{
padding:0px;
margin:0px 0px 0px 65px;
}
And here is the segment of html
<div>
<div class="imgdiv">
<!-- <img src="images/redzone.gif"> -->
</div>
<div class="zheader">
<h1>Red Zone = Danger</h1>
<h2>Everything is RED</h2>
</div>
<p></p>
</div>
I want to have the image floating to the left, and the h1/h2 floating to the right of the image. The HTML is rendered properly on the browser (Chrome, IE, etc)
Put the HTML thru xhtml2pdf, the imgdiv always takes up the whole parent div width and thus push the h1/h2 down below, regardless the width and height values. Comment out the image, then the pdf looks exactly how I want it to be.
My conclusion is the image must have some effect on how xhtml2pdf renders the image and the div contains the image.
What will be the proper way to handle my situation?
Thanks
I have header which has a logo image on the left .I am trying to put a background image in the header,but the bg image is starting from the right of the logo image.The logo image is a transparent PNG image ,so i guess the Bg image can put behind the logo image.
Here is the HTML
<div id="header">
<div class="fl" style="width:378px; height:79px; overflow:hidden;">
<p align="left"><img src="mysite.com/magento/skin/frontend/default/my_theme/images/dlogo.png" ></p>
</div>
</div>
CSS for header:
#header{ width:972px; padding:15px 0px 10px 0px; margin:0 auto; text-align:left; height:117px; background:url(../images/dbody_background.jpg)}
Use of z-index makes things more complicated while understanding code. Instead you can use offset parameter to change position of background image.
#header{
width:972px;
padding:15px 0px 10px 0px;
margin:0 auto;
text-align:left;
height:117px;
background:url(../images/dbody_background.jpg) 50px 10px;
}
Where,
50px is the offset from left boundary and..
10px is offset from top boundary.
you can even use negative value here. try it check it out.
You need to use the z-index property
The
#header
{
z-index : 100 ;
}
#header img
{
z-index : 101 ;
}
The image inside z-index should be greater than the header z-index..
This worked for me,
just change the Background property as this ->
background:url(../images/diwalibody_background.jpg)no-repeat scroll center top transparent;