I can't figure out how to stop the #body div from overlapping with the #leftnav div.
Trying to set up the page layout. Also if you have any other recommendations for what I have so far that would be appreciated!
html {
background-color: light-grey;
}
#container {
width: 900px;
margin: auto;
}
#header {
width: 900px;
font-family: 'Emblema+One', 'arial',sans-serif;
font-size: 4em;
text-align:center;
}
a {
color: #000;
}
a:hover {
color: red;
}
a:visited {
color: purple;
}
.nav {
width: 900px;
border:1px solid #000;
border-width:1px 0;
list-style: none;
margin:0;
padding:0;
text-align:center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 0 15px;
text-decoration:none;
}
#leftnav {
border-left: 1px solid black;
border-right: 1px dotted black;
float: left;
width: 140px;
height: 400px;
}
#rightnav {
border-left: 1px dotted black;
border-right: 1px solid black;
float: right;
width: 140px;
height: 400px;
}
#body {
background-color: grey;
border: 1px solid black;
width: 620px;
height: 400px;
}
#footer {
clear: both;
border: 1px solid black;
width: 900px;
height: 100px;
}
EDIT: Added HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Cupcakes</title>
<link rel="stylesheet" style="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Emblema+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<h1 id="header">Cupcakes</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Creations</li>
<li>Contact</li>
</ul>
<div id="leftnav"></div>
<div id="rightnav"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
</body>
</html>
As I said in the comment it's a problem with the Floats and Clear property, you need to clear in the #body is the element after the floats who needs to clear:
#body {
clear:both;
}
Check the Demo
Edit
My mistake when I've looked more closer into your code I see you are trying to get the #body between the floated elements. If you want to keep working that way you can:
Assign a margin-left equal to the height of the left navbar:
#body {
margin-left:140px;
}
It ends like This http://jsfiddle.net/tbHF9/1/
Or you can let the #body take that space with width:100% the content will respect the space of the floated elements:
#body {
width:100%;
}
It ends like this http://jsfiddle.net/tbHF9/2/
You're not clearing your floats properly. I'd strongly recommend checking out this article http://css-tricks.com/snippets/css/clear-fix/. Using the CSS from this article, wrap your floating elements in a div with the 'clearfix' or 'group' class.
Related
I'm learning css and html and i have this problem, where the margin-left and margin-right in the ".logo" div class don't want to center the div. Please help because i done reserch, i checked the code and everything looks good, so I have no idea whats going on.
body
{
background-color: #303030;
color: #ffffff;
}
.wrapper
{
width:100%;
}
.header
{
width:100px;
padding:40px 0;
}
.logo
{
width:450px;
font-size:48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>site</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
LOGO
</div>
</div>
</div>
</body>
</html>
Your header is only 100px while your logo is 450px, you can check this fiddle for demo.
.wrapper {
width: 100%;
}
.header {
width: 1000px;
padding: 40px 0;
}
.logo {
width: 450px;
font-size: 48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
I want to have two div boxes one at left and another at right corner.
With the help off following code it comes but both are not in same align.
It comes one after another.
Here is my code
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:300px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px;float: left }
.demo1 { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px; float: right}
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body><div id="frmt" class="demo"></div>
<div id="frmt1" class="demo1"></div>
</body>
So it comes like
and I want it to look like
It's because of max-width: 300px; in you body. Removing that would do the trick.
demo and demo1 are having a min-width of 200px each, summing to 400px. But the body have a max-width of only 300px.
<head>
<style>
html {
margin: 0;
padding: 0;
font-size: 62.5%;
}
body {
font-size: 14px;
font-size: 1.4em;
}
h1 {
font-size: 1.8em;
}
.demo {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
float: left
}
.demo1 {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
float: right
}
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div id="frmt" class="demo"></div>
<div id="frmt1" class="demo1"></div>
</body>
Flex is becoming more and more common place and means you don't have to have your boxes so far apart
.demo-container {
display: flex;
align-items: center;
}
.demo {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
}
.demo-button {
height: 25px;
margin: 20px;
}
<div class="demo-container">
<div id="frmt" class="demo"></div>
<button class="demo-button">>></button>
<div id="frmt1" class="demo"></div>
</div>
I know your question had already been answered, but there is always more than one way to solve a problem :-)
Try this
<body><div id="frmt" class="demo" style="float:left;"></div>
<div id="frmt1" class="demo1" style="float:right;"></div>
</body>
I am trying to make a website navbar using divs instead of the usual lists. The divs are inline-blocks and on hover, the navbar expands. This should cause all the inner divs to expand (height:100%), while retaining centered text. I want to use only html and css.
One way is to set line-height and use vertical-align:middle. But since the div expands vertically in a dynamic manner, I cannot give a static value to line-height. I tried using line-height:100%, but that doesn't seem to help!
The html:
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div id="headContainer">
<div id="logo"></div>
<div id="rightBar">
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
</div>
</div>
</body>
The Css:
* {
margin: 0;
padding: 0;
}
#headContainer {
height: 80px;
width: 100%;
background-color: white;
border: 5px solid red;
}
#headContainer:hover {
height: 100px; /*Dynamically change navbar height on hover, thus changing the height of all children*/
}
#rightBar {
line-height:100%;
display: inline-block;
width:80%;
height: 100%;
border: 5px solid blue;
vertical-align: middle;
}
.navelement{
display: inline-block;
height: 100%;
border:2px solid cyan;
}
The JSFIDDLE:
http://jsfiddle.net/GBz3s/1/
If you're using a precise height for your nav, then you can use a hack with padding by declaring the height, floating the divs, doing some math, and making adjustments accordingly. You can see an updated fiddle here: http://jsfiddle.net/Perry_/GBz3s/3/
.navelement{
float: left;
width: 24.25%;
border:2px solid cyan;
position: relative;
height: 70px;
padding: 25px 0 0 0;
}
#rightBar:hover .navelement {
height: 90px;
padding: 45px 0 0 0;
}
You can do it like this
you need to give display: inline-table; to .navelement and
display: table-cell; vertical-align: middle; to .navelement a
CSS
.navelement{
display: inline-table;
height: 100%;
border:2px solid cyan;
}
.navelement a {
display: table-cell;
vertical-align: middle;
}
I've been playing with this code for almost half of the day and I finally decided to pass it on to you. I would like to place three div elements next to each other with the left and right ones surrounding the main one. I would like both of the outer divs to contain only a background image and hence take on the same height as the middle div. I've been playing with solutions from other posts like this, but all of my tries were unsuccessful.
<!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="pl" lang="pl">
<head>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="content">
<p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
</div>
<div id="right"></div>
</div>
</body>
CSS:
body {
text-align: center;
}
div#container {
width: 954px;
margin: 0px auto;
height: 100%;
border: 1px solid lime;
overflow: hidden;
position: relative;
}
div#left {
margin: 0px auto;
width: 5px;
border: 1px solid red;
float: left;
display: block;
}
div#right {
margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
}
div#content {
width: 920px;
margin: 0px auto;
text-align: left;
background: #ffffff;
padding: 0px 10px;
float: left;
}
p {
font: normal 16px/18px 'Trebuchet MS', Helvetica, sans-serif;
margin: 20px 0px;
}
Thanks in advance for your help.
You'll need to add height: 100% to your body and html tags, as well as your div classes:
html {
height: 100%; /* <------------ */
}
body {
text-align: center;
height: 100%; /* <------------ */
}
div#container {
width: 954px;
margin: 0px auto;
height: 100%;
border: 1px solid lime;
overflow: hidden;
position: relative;
}
div#left {
margin: 0px auto;
width: 5px;
border: 1px solid red;
float: left;
display: block;
height: 100%; /* <------------ */
}
div#right {
margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
height: 100%; /* <------------ */
}
div#content {
width: 920px;
margin: 0px auto;
text-align: left;
background: #ffffff;
padding: 0px 10px;
float: left;
height: 100%; /* <------------ */
}
I know this doesn't really answer your question, but I tend to prefer a method that uses position:relative on the parent and position:absolute on the capping elements. This guarantees that a dynamically changing box will not throw off your layout. I also like to use the :before :after attributes (IE 8+) because of semantic reasons, but you can use child elements instead. Works just as fine. I also threw in box-sizing (FF needs -moz syntax) so the borders don't look fugly. (probably not necessary in a production setting as your would be using a background instead).
And now, the code!
CSS
div#container:before {
content:"";
width: 5px;
border: 1px solid red;
display: block;
position:absolute;
height:100%;
left:0px;
top:0px;
box-sizing:border-box; /* careful... FF needs -moz if you need that compatibility */
}
div#container:after {
content:"";
width: 5px;
border: 1px solid blue;
display: block;
position:absolute;
height:100%;
right:0px;
top:0px;
box-sizing:border-box;
}
HTML
<div id="container">
<div id="content">
<p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
</div>
</div>
DEMO
http://jsfiddle.net/f7yL6/ http://jsfiddle.net/f7yL6/show
Media queries can be used to achieve most of what % offers without any of the pain. It's not as smooth but when used for intro banners it is perfectly acceptable.
Using mobile declarations first you would use something like this.
.banner { height: 200px; }
#media all and (min-width: 500px) {
.banner { height: 400px; }
}
#media all and (min-width: 1000px) {
.banner { height: 500px; }
}
Edit: I used min-width but min-height can also be used. To really get things to look good on all sort of devices, a mix of min-width and min-height would need to be used.
I'm having difficulty achieving this. I would like the div content1 and content2 to fill up the remaining space vertically in a window with a set minimum height.
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
height:100%;
}
body {
background-color: #E1E1E1;
}
</style>
<style type="text/css">
.container {
width: 965px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.sidebar1 {
float: left;
width: 200px;
background: none;
padding-bottom: 10px;
} .content {
padding: 10px 0;
width: 380px;
height: 100%;
background: #fff;
float: left;
position: relative;
} .content2 {
float: left;
width: 380px;
height: 100%;
background: #fff;
padding: 10px 0;
}
-->
</style>
Here are the divs I'm trying to resize (currently empty but I would like them to fill up the window vertically):
<div class="content" style="border-left: solid 1px #CCC;"></div>
<div class="content2"><!-- end .sidebar2 --></div>
You need 100% height on the html tag as well
html { height: 100%; }
See: http://jsfiddle.net/wJ73v/
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}
div {border: 1px solid #000; height: 100%; float: left;}
</style>
</head>
<body>
<div id="foo">a</div>
<div id="bar">b</div>
</body>
</html>
Proper DOCTYPE is necessary, I think, since otherwise browsers go to so called quirks mode.