I am trying to design a navigation menu that is centered that sits within a div that spans 100% width of the screen. I have my navigation divs within a parent div called navigation, and that parent div is within a navigation container. I felt this was necessary to have a centered navigation within this 100% width parent div.
The problem is that I am not having luck getting the parent div to expand with the appropriate padding I give to the navItem divs. Sorry if this is kind of confusing, thanks for any advice offered.
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>
<title>
MC Machine Test
</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="top">
</div>
<div class="navContainer">
<div class="navigation">
<div class="navItem">Home</div>
<div class="navItem">Products</div>
<div class="navItem">Facility</div>
<div class="navItem">Photo Gallery</div>
<div class="navItem">Request a Quote</div>
<div class="navItem">Contact Us</div>
</div>
</div>
<div class="mainSection">
</div>
</body>
</html>
Here is the CSS.
.navContainer
{
width:100%;
background-color:#ffffff;
color:#333333;
border-bottom:solid 1px #333333;
}
.navigation
{
border:0px 1px 1px 0px solid #333333;
width:680px;
margin-left:auto;
margin-right:auto;
}
.navItem
{
padding:20px;
border-right:1px solid #cccccc;
display:inline;
}
Don't use DIVs to build menus. Use styled unordered lists.
See: I love lists.
I may be mistaken here but I think you can't add top/bottom padding to inline elements. If I understood what you want to do correctly, you could define the display as block and use floats to make them stand next to each other as opposed to below each other.
.navItem
{
padding:20px;
border-right:1px solid #cccccc;
display:block;
float:left;
}
Related
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>
<title> This is my site </title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
</head>
<body>
<div id="bigger">
<div id="header">
<div id="adv">
</div>
<div id="flag">
</div>
</div>
</div>
</body>
</html>
CSS
#bigger
{
height:1280px;
width:880px;
margin:0px 0px 0px 0px;
position:absolute
}
#header
{
background-color:Blue;
height:10%;
width:100%;
position:absolute
}
#adv
{
background-color:Yellow;
height:100%;
width:35%
}
#flag
{
background-color:Red;
height:100%;
width:65%;
float:right
}
How do you make the flag div appear beside the adv div inside the header div?
#adv needs float:left, so it floats to the left (and #flag floats to the right, next to it, because of float: right).
try this
#header
{
background-color:Blue;
height:10%;
width:100%;
position:relative
}
#flag
{
background-color:Red;
height:100%;
width:65%;
position:absolute;
top:0;
right:0;
}
Try this:
Normally: (somebody please correct me if I'm wrong on this):
Widths and heights should be set in pixel height-width from the beginning instead of percentages because the code will be easier to work with later. Also, I'm sure both elements should float left because then the code will be again, easier to work with and will follow better code conventions. Also, I added margins for easier viewing. You can always delete them if you wish. Code:
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>
<title> This is my site </title>
<link rel="stylesheet" type="text/css" href="example1.css">
</head>
<body>
<div id="bigger">
<div id="header">
<div id="adv">
</div>
<div id="flag">
</div>
</div>
</div>
</body>
</html>
CSS:
#bigger
{
height:1280px;
width:880px;
margin:0px 0px 0px 0px;
position:absolute
}
#header
{
background-color:Blue;
height:90px;
width:1290px;
overflow: hidden;
}
#adv
{
background-color:Yellow;
height:80px;
width:840px;
margin: 5px;
float: left;
}
#flag
{
background-color:Red;
height:80px;
width:420px;
margin: 5px;
float:left;
}
I have a div that will not stay put, it travels outside of the parent. The div I'm having trouble with is marked "6". It travels outside the parent to the right.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html{
border:1px solid;
height:99%;
}
body{
height:100%;
margin:0;
padding:0;
}
#pageWrapper{
padding:0;
margin:0;
height:100%;
position:relative;
}
</style>
</head>
<body>
<div id="pageWrapper">
<div style="width:50%;border-right:0px solid;height:100%;float:left;position:relative;">
<div style="width:100%;height:30%;border:1px solid;">1</div>
<div style="width:100%;height:40%;border:1px solid;">2</div>
<div style="width:100%;height:30%;position:absolute;bottom:0;border:1px solid;">3</div>
</div>
<div style="width:50%;border:0px solid;height:100%;float:right;">
<div style="width:100%;height:40%;border:1px solid;">4</div>
<div style="width:100%;height:40%;border:1px solid;">5</div>
<div style="width:100%;height:20%;position:absolute;bottom:0;border:1px solid;">6</div>
</div>
</div>
</body>
</html>
Add position:relative to the parent div or remove position:absolute from the div you marked
Get rid of the position:absolute;bottom:0 on the lower two divs - It's unnecessary and causes your erratic behaviour.
I'm having a problem with floating divs and IE7. For example, the following HTML code:
<!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' lang='en' xml:lang='en'>
<head>
<title>IE Float Test</title>
<style>
.container {
width: 200px;
background: #ddd;
overflow: hidden;
}
.item {
float: left;
padding: 5px;
background: #eee;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">This is a item</div>
<div class="item">This is another item</div>
<div class="item">Last item</div>
</div>
</body>
</html>
Give's the following in chrome (plus other major browsers):
But, the following in IE7:
How do I get IE7 to move the item div to the next vertical position if it is too wide?
Many thanks, John.
Adding white-space: nowrap to .item works: http://jsbin.com/ifexuf/2
Is that acceptable?
You need to add min-width property to the .item
If you want the items stacked, there is no need to "float:left" in your ".item" CSS style. Block level elements like <div> appear stacked by default.
I've been working with this for awhile and I'm pretty sure its unsolvable. Just thought I'd throw it out to find out if someone smarter than I can figure it out (without changing the markup! :)
The layout below is a typical tableless css based design with header and footer sandwiched between two columns (content and sidebar) using floats and relative positioning.
This particular layout is a WordPress theme that I've designed dozens of sites around solely with css and images. That's why my requirement is that the markup remain as is.
I'd like the "avatar" div to stay anchored to the top of the header div regardless of the height of "featured" and without using "position:fixed" or changing the markup order. If you copy the code below and save it as an .html file, you'll see that it does just that right out of the box. However, once you add or subtract height from "featured", "avatar" will move accordingly up or down. That's the challenge, I need avatar to stay at the zero position relative to the body, regardless of the dimensions of "featured".
Setting "sidebar" to absolute positioning would be the obvious solution, however, it suffers in that it will screw up the flow of the footer div below content and sidebar (whichever is taller).
I'm thinking that the answer might lie in one of the table display properties (since this is essentially creating an unmerged cell out of sidebar and setting its top margin relative to its parent container), but that's one area of css that I've largely left alone.
<!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" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
body {margin:0;padding:0;}
.header {height:100px; background:red; width:977px; margin:0 auto;}
.main {width:977px; margin:0 auto;}
.featured {background:green;height:50px;}
.content {float:left; min-height:300px; border:1px solid #777; width:700px;}
.sidebar {background:blue; width:250px; float:right; min-height:400px}
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;}
.clear {clear:both;}
.avatar { width:200px; background:orange; margin-top:-150px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div>
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div>
</div>
</body>
</html>
Try this:
<!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" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
*{margin:0;padding:0;}
body{margin:0;padding:0;}
.wrapper{width:977px;margin:0 auto;}
.header{height:100px;background:red;}
.leftColumn{float:left;width:700px;}
.featured{background:green;height:50px;}
.content {min-height:300px;border:1px solid #777;}
.sidebar {background:blue;width:250px;float:left;margin-left:27px;min-height:400px}
.avatar {width:200px; background:orange;margin-top:-100px;}
.clear {clear:both;}
.footer{background:gold;height:100px;clear:both;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="leftColumn">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
</div><!--.leftColumn-->
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div><!--.sidebar-->
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div><!--.main-->
</div><!--.wrapper-->
</body>
</html>
How about something like this:
Avatar and Sidebar relative to the header floated right to stay in the flow?
<!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" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
body {margin:0;padding:0;}
.header {height:100px; background:red; width:977px; margin:0 auto;z-index:1000;position:relative;}
.main {width:977px; margin:0 auto;}
.featured {background:green;height:50px;}
.content {float:left; min-height:300px; border:1px solid #777; width:700px;}
.sidebar {background:blue; width:250px; float:right; min-height:400px}
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;}
.clear {clear:both;}
.avatar { width:200px; background:orange; /*margin-top:-150px;*/ }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div id="header_stuff" style="float:left;">header</div>
<div id="side2" style="float:right;background-color:blue;"><div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div class="sidebar">
<div>This content should flow below avatar relative to avatar's height</div>
</div>
</div>
</div>
<div class="main">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div>
</div>
</body>
</html>
Edit: Perhaps this is closer. The blue sidebar can be tweaked if the header sections need to be on top (z-index, etc).
I've got a parent div floated left, with two child divs that I need to float right.
The parent div should (if I understand the spec correctly) be as wide as needed to contain the child divs, and this is how it behaves in Firefox et al.
In IE, the parent div expands to 100% width. This seems to be an issue with floated elements that have children floated right. Test page:
<!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" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0;float:left;">
<div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
<div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>
</html>
Unfortunately I can't fix the width of the child divs, so I can't set a fixed width on the parent.
Is there a CSS-only workaround to make the parent div as wide as the child divs?
Here's a solution which makes inline-block work on IE6 as at http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ to make the elements behave more like right-floated <div>s:
<!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" lang="en" xml:lang="en">
<head>
<title>Float with inline-block test</title>
<style type="text/css">
.container {
border-top: solid 10px green;
float: left;
}
.tester1,
.tester2 {
float: right;
}
.tester1 {
border-top: solid 10px blue;
}
.tester2 {
border-top: solid 10px purple;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.container {
text-align: right;
}
.tester1,
.tester2 {
float: none;
zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="tester1">Tester 1</div>
<div class="tester2">Tester 2</div>
</div>
</body>
</html>
I came up with a solution using text-align: right and display: inline.
Try this:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="margin-top: 10px; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
<div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
</div>
</div>
Notice I had to switch the order of the "tester" boxes in the markup to show up in the same way as your example. I think there is an alternative that margin-top on the new container, but I don't have time looking into right now.
If you want cleaner styling for all other browsers try this:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="float: right;">
<div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
<div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
</div>
</div>
There are some different issues that can come up when you want to layout stuff around those boxes. However, I think those issues will be much easier to solve than this one.
Hope this was helpful for you.
I couldn't come up with a CSS-only solution that fits your requirements, but if you want to use a JavaScript solution, maybe the following code can help? I did not alter the style of the divs, I only added the IDs main, sub1, and sub2 to your divs.
var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
I had the same problem and solved in by positioning the child element (which I wanted to float right) with position:absolute and right:0. I gave the parent element enough right padding to make room for the child element... Worth a shot, might not work for all applications!
What about using a single-cell table instead of the outer div? It may need some more work to have everything aligned properly, but the table doesn't expand.
Something you could start with is this:
<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>
The result of that seems to be at least in the ballpark of what you're looking for. Obviously, you'd want to tweak it for your needs, and probably add some css logic to only apply it to browser < IE 7.
If that's not exactly what you're looking for, try playing with some negative margins.
Firstly, why aren't you using inline styles?
I'd use this to target IE with a separate css file:
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
I know this isn't a direct question, but IE is ALWAYS a pain to deal with! Most designers/developers that I know will make a totally new stylesheet for IE.
A very hacky but a CSS only solution that works okay in IE, chrome and FF.
I took kaba's solution - but the problem was, it works okay in IE but all the other browsers show a 4px space between the 2 child divs. The space remains as 4px even if the content on both the divs expand. So to fix that I've used IE conditional statements. I doesn't look like the best code in the world but it gets the job done.
<!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" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0; float: left;">
<div style="border-top:solid 10px #00c; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester2</div>
<div style="border-top:solid 10px #00c; display: inline;margin-left:-4px">
<!--[if gte IE 5]>
<div style="border-top:solid 10px #00c; display: inline;margin-left:4px">
<![endif]-->
Tester1
<!--[if gte IE 5]>
</div>
<![endif]-->
</div>
</div>
</div>
</body>
</html>