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
Related
So basically I want a side bar and a navigation bar. But when I set the div2 (the side bar) top margin to 110px it moves div1 down with it. Please help me.
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="Home.css">
<title>Home</title>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
And the CSS...
body {
background-color:#CCC;
}
#div1 {
width:auto;
height:100px;
background-color:gray;
border-radius:10px;
}
#div2 {
width: 150px;
height: 500px;
background-color: grey;
border-radius: 10px;
margin-top:110px;
}
http://jsfiddle.net/shane__kerr/5p8Qr/2/
Fiddle
Now i did a float:left and width:100% to div1 and clear:both to div2.
Dont forget to add clear:both to any div inside the div1
Change the height in #div1 to auto and set margin-top:100px in #div1, not #div2.
When you add a margin-top to div2, the webpage also creates the other elements to 'trap' that element on its position. To fix this you should use display: inline-block; this way all not given margin is gone.
Why not use float?
Well basically float also sets the display to inline-block but will also position the element. With display-inline only the given margin will be used, without reposition it.
jsFiddle
I thinks your CSS looks good. But I think div 1 and 2 should not be inside each other to achieve what you want.
Try this:
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
Demo here
why is my form div at bottom of parent div? it wants me to say more, but the question has been asked and it's pretty clear... why is the form div appearing at the bottom of my header div? i know i can hack it and give it a negative top margin, but I KNOW that's not proper form. what gives? thx.
html:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="login">
<input type="text" placeholder="EMAIL ADDRESS" value="" name="email" id="user">
</div><!-- end login div -->
</div><!--end header div -->
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
body {
margin: 0px;
padding: 0px;
}
input {
float: right;
margin-left:15px;
}
#header {
background-image:url(images/headerGradient.png);
background-repeat: repeat;
margin:0px;
padding:0px;
width:auto;
height:72px;
display:block;
}
#logo {
background-image:url(images/logo.png);
width: 182px;
height: 66px;
vertical-align:middle;
margin-left: 60px;
}
It's because your logo div has no floating style set.
Try to add
float:left
to #logo div
Demo: http://jsfiddle.net/eyMJa/1/
Using float in Css I have found becomes really annoying and makes getting layout how you want it kinda difficult, Unless you can watch a fair few youtube video's until you master it.
I'm trying to use:
position:absolute;
instead, and then setting
top:Number of Pixels or percentage/em;
right:Number of Pixels or percentage/em;
bottom:Number of Pixels or percentage/em;
left:Number of Pixels or percentage/em;
also
position:relative;
Seems to add blank space in the dimensions of the div again messing up the layout, where Absolute acts kind of like float, but without the annoying interactive or page jerking of the other two methods.
If you do use float for whatever reason, remember to add Clear float after each time you use it unless you specifically need to keep it.
Hope this helps
I am making a website thats 960px wide but I want images on both sides of the header that you can see if you have a bigger screen.
because I want to keep the site 960px wide I need these extra side images to not be counted by the browser, I can get it to work on the left
see here:
http://www.wireframebox.com/test/sideimages/index_leftworks.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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin: 0; padding: 0; border: 0; background-color:#096 }
img { border: 0; }
#main {
width:960px;
height:216px;
background-image:url(main.jpg);
position:relative;
top:0; margin: 0 auto;
}
#left {
width:170px;
height:216px;
background-image:url(left.jpg);
float:left;
left:-170px;
position:relative;
}
#right {
width:170px;
height:216px;
background-image:url(right.jpg);
float:right;
left:170px;
position:relative;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
if you make your window thinner the left red image disappears off the site without causing the browser window to get a bottom scroll bar, however when I try and do the same thing to the right side it doesn't work
see here
http://www.wireframebox.com/test/sideimages/
Code is equal, only <div id="right"></div> is missing
the css is in the source.
you can also see it being used on this site to show the date sticking out the left of the page, without impacting the overall sites width
http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/
why does this work on the left but not the right?
See the below fiddle for output...
Fiddle: http://jsfiddle.net/C2j6G/4/
Demo: http://jsfiddle.net/C2j6G/4/embedded/result/
see below image -
It's better if you can combine those two images & give in the background of body. like this:
HTML
<div id="main"></div>
CSS
body {
margin: 0;
padding: 0;
background:#096 url(http://imgur.com/JHXDv.png) no-repeat top center;
}
#main {
width:960px;
height:216px;
background-image:url(http://www.wireframebox.com/test/sideimages/main.jpg);
margin:0 auto;
}
Check this http://jsfiddle.net/PVWzA/1/
If you want your website page to be 960px wide, then you should change your width of the main image to 960 - 170(left) - 170(right). Changing the width of main.jpg to 620px should fix your issue.
HTH
Put the image in a div or image tag that is larger than your center div and make it the child of the center content div. Also make sure that it's positioning will take it out of the flow(\absolute). If you then add a negative margin you can pull the image outside of the content div without disrupting its placement.
#center div.top{
width:1200px;
height:170px;
margin: 0px -170px;
position:absolute;
background:url("randombackground.png") no-repeat;
}
The html will be kinda like this:
<div id="center">
<div class="top"></div>
Content content content
</div>
This seems incredibly simple but I have no idea why I can't put a div tag inside of a container div tag as it will not show up in Firefox or Chrome properly, but it works in IE6...??? Code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
</div>
</body>
</html>
CSS: style.css
body {
background:white;
font-family: sans-serif;
}
#container {
margin:0 auto;
width:960px;
background:#e3e3e3;
border:1px solid black;
}
#nav {
padding:10px;
margin-top:10px;
float:left;
width: 400px;
height:100px;
background:white;
border:1 px solid black;
}
It's as if the container is not expanding with the DIV tag inside of it..what gives?
This is a common issue people face with CSS. Whenever you float something, it's parent collapses as you are seeing. You can work around it in the following ways:
set an explicit height on the container
put overflow:hidden or overflow:auto on the container
use the clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/
I find #2 to be the easiest and best in most cases. Use #3 when overflow:hidden/auto has an undesirable side effect.
It is because the #nav div is floated left. Floated elements are just that--floating, and have no height unless something anchors the box below it by clearing the floats.
.clear { clear: both }
and add a div below the floating div to clear it.
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
<div class="clear"></div>
</div>
See this SO question for a very detailed answer on clearfixes: What methods of ‘clearfix’ can I use?
Do overflow: hidden for #container.
This is one known limitation of floating.
Before: http://jsfiddle.net/N669N/
After: http://jsfiddle.net/N669N/1/
I have the following situation, presented in the picture. Grey div is the parent of magenta and blue divs. Magenta div scales vertically with the content. I would like to have blue div always scale to the bottom of the containing grey, div. I've searched and tried various combinations, but all to nil effect.
edit:
Problem solved! Container needs an overflow: hidden, and the div that I want to stretch to the bottom (blue) needs padding-bottom: 1000px; margin-bottom: -1000; (or larger if you need)
I got this to work (in Chrome anyway) by setting the parent's div:
position: absolute;
and the child's div:
height: 100%;
If you need support from IE6 and up, the answer is: You can´t in css only.
There are different solutions to really scale the div or just have it appear like that:
You can use a background-image for the grey div (if all you need is the background to stretch all the way down)
You can use javascript to calculate the height of the grey div and apply it to the blue div
There is a ccs option using a very big padding and an equally big negative margin, but I don´t remember if it works for all browsers and I can't find the article right now.
Edit: The big padding / negative margin css solution:
The article is talking about Firefox 1.5 and Safari 2 so I don't know if it still works, but here it is.
In my experience setting the height of the blue DIV to 100% doesn't work. The only time that I have wanted this was to have the blue DIV with it's own background, to solve this you need to just have the background of the gray DIV include the blue background of the other DIV.
The JavaScript to do it would be...
<div id="yourDiv" style="background-color: Blue; width: 150px;">
Hello
</div>
<script type="text/javascript">
var div = document.getElementById('yourDiv');
div.style.height = document.body.clientHeight + 'px';
</script>
Edit:
Check this link for getting clientHeight in different browsers...
Inside of your parent div, if you set "float:right" on your blue div and play around with your height in percent (height:100%;), I think you should achieve what you're asking.
Since the blue div is a child of your grey div, the maximum height of your blue div shouldn't exceed your parent div. Unless I'm missing something here...
Also, if you are floating your blue div on the right, be sure to place it before the magenta div in your markup.
Acorn
Another way to set height 100% in html objects is use styles:
<html>
<head>
<style>
html, body {
height: 100%;
}
#mydiv {
height: 100%;
background-color:red;
}
</style>
</head>
<body>
<div id="mydiv">aaa</div>
</body>
</html>
The key is to have a set height on the parent container. Then the height:100% works
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Divs</title>
<style type="text/css" media="all">
#main {
height:30em;
width:30em;
background-color:#999999;
padding:1em 1em 0px 1em;
}
.inner {
width:5em;
}
#blue {
float:right;
background-color:#0000FF;
height:100%;
}
#magenta {
float:left;
background-color:magenta;
}
</style>
</head>
<body>
<div id="main">
<div class="inner" id="blue">
1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10
</div>
<div class="inner" id="magenta">
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
</div>
</body>
</html>