How how to make <a> text align bottom? I have added height = line-height, and vertical-align:bottom; but the text still in the middle of the div. How to do? Thanks
Test in http://jsfiddle.net/BanAz/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#layer{width:198px;height:48px;line-height:48px;border:1px #000 solid;vertical-align:bottom;}
#layer a{text-decoration:none;}
</style>
</head>
<body>
<div id="layer">
menu
</div>
</body>
</html>
Options include:
Remove line-height: 48px and add display: table-cell to #layer:
http://jsfiddle.net/jgQ9k/1/
Note that this won't work for IE7, because display: table-cell isn't supported.
Use a large line-height: http://jsfiddle.net/jgQ9k/2/
And the method I would actually use:
Add position: relative to #layer, and position:absolute; bottom:0 to #layer a:
http://jsfiddle.net/jgQ9k/3/
The height size (48px) is equal to line-height size (48px). Try to increase the height size, and you will see the css properties work fine and the text will be positioned on the bottom
#layer {
display: table-cell;
}
Related
I have simple task with two div. I need that both have colored borders and inner div must use all space. Here my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
.d1{ width:150px;height:150px;border:solid 10px black;background:red;}
.d2{ height:100%; width:100%; border:solid 20px blue; background:green;}
</style>
</head>
<body>
<div class=d1>
<div class=d2>some text</div>
</div>
</body>
</html>
But browser (IE, Chrome) do not catch that I set borders and 'divs' to show with artifacts.
Anybody catch this bug?
Do this instead:
<style type='text/css'>
.d1{ width:110px;height:110px;border:solid 10px black;background:blue; padding: 20px;}
.d2{ height:100%; width:100%; background:green;}
</style>
I think that gives you the effect you're after, basically replacing the border on .d2 by using a background colour on .d1, adding padding to .d1 to act as a border of sorts.
If you add any margin or padding to .d2 it's going to add to the 100% height and width values which means they'll overflow.
Hope that makes sense.
edit: note how I've compensated for a padding of 20px by reducing the height and width by 40px (because it will add padding on both left and right and also top and bottom, making for 40px additional width and height)
If you know width and height of parent div, you can set correct styles for the children, without percentage, so this jsFiddle may do a work for you.
Borders aren't included in your width/height, then your 150x150 will "become" a 170x170 with a 10px border.
Two solutions :
Take borders in account, increasing your div width/height
Use more divs, and forgot borders
Here is a Jsfiddle to show you both solutions
Because you specified borders thickness the height and width will not take that into account to show nested inside the borders. A solution for your problem if I understand it correctly you can achieve as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
.d1{ width:150px;height:150px;overflow:auto;border: solid 10px black;background:red;}
.d2{ height:73%; width:73%;border: solid 20px blue; background:green;}
</style>
</head>
<body>
<div class="d1">
<div class="d2">some text</div>
</div>
</body>
</html>
Basically you are having issues with the Html box model.
you can either figure out the maths your self or depending on which browsers you have to support there is the new "box-sizing" css style which changes how the box model works.
here is a fiddle showing how it can be used:
http://jsfiddle.net/EHUab/
I have a main div in the center of my page with an id of "panel".
I want to position another div, "toolbar" so that it is top aligned and flush against the side of the "panel" div.
Like so
And I want the panel div to remain centered. (Currently doing this by setting margin-left/margin-right to auto)
Absolute positioning on the toolbar breaks when I resize the window.
I've also tried floating them inside a wrapper, but invariably this moves the panel from the center...
This feels like it should simple, am I overlooking something? What is the best way to accomplish this?
Current live example here:
Example
Thanks for any advice..
Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="toolbar">
Toolbar
</div>
<div id="panel">
Panel
</div>
</body>
</html>
CSS:
#toolbar{
border:1px solid black;
color:red;
width:100px;
height:200px;
}
#panel{
border:1px solid black;
color: blue;
margin-left:auto;
margin-right:auto;
width:500px;
height:500px;
}
See: http://jsfiddle.net/thirtydot/ywc5f/
In the HTML, you can move #toolbar inside #panel, then use absolute positioning.
CSS:
#panel {
position: relative;
}
#toolbar {
position: absolute;
left: -102px; /* width of #toolbar + border */
top: -1px; /* border */
}
HTML:
<div id="panel">
Panel
<div id="toolbar">
Toolbar
</div>
</div>
User floats. See this fiddle.
you're using an absolute width for both of those so put them in another div as a wrapper and give it the width of the the middle one + (the narrow one x 2)
then use auto on the new wrapper div and use float left on both the interior divs
What do I have to do to prevent the following from stretching more than 100%? It obviously stretches to 100% then adds on the padding... Thanks!
<!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" lang="en">
<head>
<style type="text/css" media="screen">
#box {
width: 100%;
padding: 20px;
border: 1px solid #000;
}
#box input {
width: 100%;
padding: 5px;
}
</style>
</head>
<body>
<div id="box">
<form>
<input type="text" value="" />
</form>
</div>
</body>
</html>
Your width:100% on the div is altogether unnecessary. Div's are block level elements which automatically expand to 100% of their container. Remove the width:100% from your div declaration and the padding will be contained within the parent container, no scrolling or extended width.
DON'T use a negative margin, that's just adding a hack to achieve something simple.
You can use this rule in general: You almost never have to put width:100% on a div (I can't think off the top of my head why you would unless it was displayed inline or something) because as mentioned above, block level elements always expand to 100% of their container
edit: that was dumb to suggest setting width 100% on a div displayed inline as you can't set the dimensions on an inline element
Create a new form rule and move the padding: 20px; declaration to it.
#box {
width: 100%;
border: 1px solid #000;
}
form {
padding: 20px;
}
In Firefox 3.5.8 on Windows, I get a vertical scrollbar when I use this HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Haloooo1 - T3</title>
<style type="text/css">
html, body, div {height: 100%; margin: 0; padding: 0; }
#main {
width: 320px;
background:#7C7497;
height : 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='main'>
<p>Hello</p>
</div>
</body>
</html>
Q1. Can anyone explain why?
Can anyone explain how to remove it?
Q2. Can anyone explain why there is a cushion of whitespace above the div? Can anyone explain how to remove it?
Add this:
p {margin: 0; }
Your p element has some margin on the top.
Let me recommend using a CSS reset file. I like the YUI one.
According to firebug it is margin in <p>. At least in 3.6 setting margin-top to p solves problem.
p {
margin-top: 0;
}
It's the paragraph.
If you add
p { margin: 0px; padding: 0px }
all gets well, including the scroll bar.
Why the paragraph feels entitled to leave its parent element like that, I'm not entirely sure yet.
A1. You are getting a scroll bar because the div has a size of 100% of i browser window not 100%. Because the div is the same size as the browser window but is shifted down a scroll bar is needed to display the bottom of the div.
A2. The whitespace above the div is the top margin of the p element.
I've got a really frustrating problem with a web application I work on (I didn't originally write it). It uses frames for the layout scarily enough. The problem I'm having is that all elements with a background colour and border set via CSS default to 100% width. I've just tested div elements, paragraph elements etc.
I removed the stylesheet completely and then tested it and I had the same problem, so it's not the stylesheet causing the problem.
I wrote a quick test to make sure it wasn't conflicting code and used the same doctype and xmlns as ours - I get the same problem. Here's the example code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#test {
border:1px solid #ccc;
background-color:#ddd;
}
</style>
</head>
<body>
<div id="test">
Test information!
</div>
</body>
</html>
Any ideas?
I think this is required by HTML/CSS. Block elements extend the full width unless there is something to stop them.
(FF has the same behaviour.)
It's not because the element has a background or a border that it expands to the full with of the parent, it's because it's a block element. The background or border just makes you see how large the element really is.
The default width is actually not "100%", but "auto". The practical difference is that the element including borders uses 100% of the width, instead of the width excluding the borders becoming 100% of the width (making the width including borders wider than it's parent).
If you don't want the element to use the available width you can make it a floating element. Then it will adjust itself to it's content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#test1 {
float: left;
border:1px solid #ccc;
background-color: #ddd;
}
#test2 {
float: left;
clear: both;
border:1px solid #000;
background-color: #ccf;
}
</style>
</head>
<body>
<div id="test1">
Test information!
</div>
<div id="test2">
Test information!
</div>
</body>
</html>
As Richard and BeefTurkey say, divs are block elements and will fill the width of the browser.
You can either use an inline element, such as a span
<span id="test">
Test information!
</span>
or add some style to your div to force it to be inline
div#test { display: inline; }
Don't divs default to 100% (of parents size) because they're blocks? You could always try changing display to inline: #test {display:inline;}