<div id="header">
<>.....<>
<div id="Menu" style="background-color: #662900; font-size: 20px; height: auto; width: 100%; word-spacing: 50px; position: absolute; float: left">
I want the div id-menu to be displayed right below the header div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
#header {
display: block;
}
</style>
</head>
<body>
<div id="header">
Header</div>
<div id="Menu" style="background-color: #662900; font-size: 20px; height: auto; width: 100%; word-spacing: 50px; position: absolute; float: left"> Menu
</div>
</body>
</html>
Demo Here
you can add margin: 0 in your css to appear right below.
In your code you forgot to close header div, so the div menu is inside the header div
see this DEMO .
Since you have absolute menu, my suggestion would be to go with relative header.
HTML
<div id="header">
<>.....<>
<div id="Menu" style="">
Menu
</div>
CSS
#header{position:relative}
#Menu{background-color: #662900; font-size: 20px; height: auto; width: 100%; word-spacing: 50px; position: absolute; float: left}
#menu{
position: absolute;
right:0;
}
When you giving position absolute to your menu div, you need to specify that position with
top: _enter here your header height
left:0px;
Related
I have a site with two footers. One is very well behaved as a 'fixed' footer that is always visible at the bottom of the page. The other footer is larger and should be below all content, only appearing when all content is scrolled through (if the content is bigger than the page, it shouldn't be visible until you scroll to the bottom). However, it does need to be sticky so that if there's very little content it doesn't ride up and leave an awkward white gap.
Right now it's displaying in the middle of the page. :( Help?
html, body {
height: 100%;
width: 100%;
}
#PageContainer {
width: 100%;
height: 100%;
}
header {
width: 100%;
}
#Content {
position: relative;
background-image:url(Images/Golf%20Ball%20Texture.jpg);
background-repeat:repeat;
background-size: 150px auto;
width: 100%;
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
min-height: 90%;
}
footer {
width: 100%;
}
#MovingFooter {
clear: both;
position: absolute;
width: 100%;
background-color: #FFD600;
right: 0;
bottom: 0;
font-size: .9em;
}
#StickyFooter {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #787878;
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="Stylesheet" href="../style.css" type="text/css" />
<link rel="shortcut icon" href="Images/Logo%20Favicon.ico">
<title>Your Personality</title>
</head>
<div id="PageContainer">
<header>
</header>
<body>
<div id="Content">
</div> <!--id="Content"-->
<div id="MovingFooter">
<h2>Company Philosophy</h2>
<p>Footer content</p>
</div> <!--class="FooterThirds" -->
</div> <!-- class="ThirdsContainer" -->
</div> <!-- id="MovingFooter" -->
<div id="StickyFooter">
<p class="FancyFinePrint">© Copyright 2014 by Company Name. All Rights Reserved.</p>
<div id="FooterPartners">
<p class="FooterPartnerText">Proud Partners With:</p>
</div> <!-- id="FooterPartners" -->
</div> <!-- id="StickyFooter" -->
</div> <!-- id="PageContainer" -->
</body>
You're looking for a technique like FooterStickAlt, which keeps the footer below the content, but also keeps the footer at the bottom of the viewport if the content isn't as tall enough to push it down that far.
Put simply, everything except the footer gets wrapped in a containing element which has min-height: 100%, and then the footer is pulled up with a negative top margin. This particular technique necessitates knowing the height of your sticky footer.
https://css-tricks.com/snippets/css/sticky-footer/ and http://cssstickyfooter.com are the same idea.
I have a container div, which contains a varying amount of divs all with the same class. The contents of the various divs are dynamic and will be driving the height of their div blocks. The width is set to a fixed value making for 2 collumns. I have run into a situation where the first div is floated to the left, then the following 2 divs are each individually shorter than the first, but when combined they extend beyond the first div to their left. The following fourth div is then floating back to the first column under the first div, however it is not floating "up" to be directly under the first div. It will display as being floated to the left with the vertical position being positioned under the third div block. Is there a way to remedy this?
Remember i am generating each of the divs within the container div via a loop and consequently would like to have a consistent style class for each of the divs. If it is not possible to do so with one style class, is there a way to get the height of the div after i filling it with the php script?
Here is an example of the problem i am experiencing:
<!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>Dynamic Div Test</title>
<style>
.container2 {
width: 1000px;
display: block;
position: relative;
float: none;
margin-left: auto;
margin-right: auto;
padding: 0px;
background: #000;
overflow: hidden;
-moz-box-shadow: 0px 0px 20px #FFF;
-webkit-box-shadow: 0px 0px 20px #FFF;
box-shadow: 0px 0px 20px #FFF;
min-height: 100%;
}
.container {
width: 660px;
display: block;
position: relative;
float: left;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 35px;
background-color:#093;
height:400px;
}
.dynamicDiv {
float: left;
position:relative;
display:block;
background-color: #FFF;
width: 325px;
padding: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
}
</style>
</head>
<body>
<div class="container2">
<div class="container">
<div id="div1" class="dynamicDiv">1<br />2<br />3<br /></div>
<div id="div2" class="dynamicDiv">1<br />2<br /></div>
<div id="div3" class="dynamicDiv">1<br />2<br /></div>
<div id="div4" class="dynamicDiv">1<br />2<br />3<br /></div>
</div>
</div>
</body>
</html>
Sounds like what you want is a 'masonry' style layout, check out isotope.
EDIT - oops, I may have misunderstood!
Below code will simply give you floated divs but the wrappers won't allow for tall/short "floating". There are plugins available for out of the box solutions though.
Suggestions:
jQuery Masonry
or as Josh Rutherford noted, Isotope.
For every two div's, generate a wrapper div as well.
<div class="container2">
<div class="container">
<div class="wrapper" id="div_wrapper_1">
<div id="div1" class="dynamicDiv"></div
<div id="div2" class="dynamicDiv"></div>
</div>
...
</div>
<style type="text/css">
.dynamicDiv {
float: left;
}
.wrapper {
overflow: hidden;
}
</style>
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A+Tec</title>
<style type="text/css" >
* {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: auto;
background-color: #ABEBC1;
position: fixed;
}
#nav {
width: 720px;
height: auto;
margin: auto;
}
.buttons {
height: 25x;
width: 150px;
background-color: #ABEBFF;
background-repeat: repeat-x;
float: left;
margin: 0px 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div class="buttons">
</div>
<div class="buttons">2</div>
<div class="buttons">3</div>
<div class="buttons">4</div>
<div class="buttons">5</div>
<div class="buttons">6</div>
</div>
</div>
</body>
</html>
I have the wrapper with the divs inside. There is clearly enough space for all the divs yet one of them overflows to next line as in picture:
I have no idea what is wrong but the div with 6 in it has overflowed onto the next line but the wrapper is plenty big enough to accomodate it. Can you please help me?
Thanks
This should be a pretty trivial issue, but it's causing me a bit of a headache.
I have an html layout, summarized with the relevant code below. Basically I have the <section> and <aside> acting as the main content, and the right handed content. I am trying to make sure they will always behave in this manner, regardless of any kind of funky boundaries caused by borders, margins, padding, etc. The solution seemed to be simply setting them to have absolute and relative positioning.
This did achieve my desired result, but I am having trouble with the underlying content. The <article> does not stretch to the right height. Since the height is not always determinable at code-time, giving it a set height is not an option. My intended goal is that the underlying <article> background will stretch to accommodate no matter how high either of the <section> or <aside> panes become. Any ideas?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
.container { margin: 0px auto; width: 960px; position: relative }
article {
overflow: hidden;
background-color: Black;
height: auto;
}
section {
width: 675px;
position: relative;
left: 0px;
overflow: hidden;
margin: 10px;
height: 300px;
background-color: Aqua;
}
aside {
width: 260px;
position: absolute;
right: 0px;
top: 0px;
overflow: hidden;
margin: 10px;
height: 500px;
background-color: Fuchsia;
}
</style>
</head>
<body>
<div class="container">
<article>
<section>
</section>
<aside>
</aside>
</article>
</div>
</body>
</html>
As requested, here is the code with faux columns:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Faux column example</title>
<meta charset="UTF-8" />
<style type="text/css">
html, body {
height: 100%;
}
.container {
margin-bottom: 2em;
}
article {
background: #000 url(http://imaginekitty.com/cssExamples/oog.gif) repeat-y;
border: solid 10px #000;
display: block;
margin: 0 auto;
min-height: 100%;
width: 945px;
overflow: hidden;
}
section {
display: block;
float: left;
overflow: hidden;
width: 668px;
}
aside {
float: left;
margin-left: 20px;
overflow: hidden;
width: 255px;
}
</style>
</head>
<body>
<div class="container">
<p>There is no use of absolute or relative positioning here.</p>
<article>
<section>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</section>
<aside><p>asdf</p>
</aside>
</article>
</div>
<div class="container">
<article>
<section>
<p>asdf</p>
</section>
<aside><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</aside>
</article>
</div>
</body>
</html>
The reason I mentioned that absolute positioning is, in my opinion, inappropriate in this situation is that it removes elements from the normal document flow which will most likely cause issues with other elements on the page. At best, it's just unnecessary. At worst, you'll pull your hair out trying to figure out problems. :)
A good article on the subject: http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/
Im trying to do layout that has header, content and footer. Footer must be bottom of the page(done). But my problem is how can I get content 100% strech between header and footer. When my content is empty, then I can't see that, but when I'm writing some word to html in to content div, like "hello", then the content is only so long than the content in content. I guess you can understand what I mean.
Can somebody explain what is wrong in my css code.
Red is header, green is footer, cyan is content and blue is container. Problem is that Content does not cover the container area.
<!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>Praktika1</title>
<link rel="stylesheet" href="style1.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#CHARSET "UTF-8";
*{padding:0; margin:0;}
html,body{
height:100%;
}
#container{
width: 1024px;
position:relative;
background-color:#cce;
margin: 0 auto;
min-height:100%;
}
#header{
width: 1024px;
height:100px;
background-color: #CCC;
}
#content{
height:100%;
width:1024px;
background-color:yellow;
}
#footer{
width: 1024px;
height: 100px;
position:absolute;
bottom:0;
background-color: #ced;
}
You're in luck. I spent a good amount of time yesterday figuring out a question similar to this.
http://andrew.x10.mx/rene/
html -
<div id="container">
<div id="header">
<div id="header-content">
Hai der. I'm a header.
</div>
</div>
<div id="content">
<h1>Content here</h1>
<div id="footer">
<div id="footer-content">
I'm a footer lol
</div>
</div>
</div>
</div>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background: #0f0;
top: 0;
left: 0;
position: absolute;
width: 100%;
}
#header-content {
padding: 10px;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 1024px;
text-align: left;
margin: 0 auto;
min-height:100%;
}
#content { padding: 20px 10px; }
#footer {
background: #f00;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
text-align: center;
}
#footer-content { padding: 10px; }
Hard to tell without the HTML, but I would try to add a min-height of %100 to #content
One solution would be this:
#content{
background-color:yellow;
position:absolute;
top:100px;
bottom:100px;
width:100%;
}
You could use absolute positioning on all three parts of the page (header, content, footer):
Live demo: http://jsfiddle.net/bBEJ6/
Perhaps a margin-bottom: 0 px could work?
Your question is worded very poorly, but from what I can see you want your content to fill up 100% of your page, yet you have specified a specific width on your #content section by using the width:1024px property.
Try width:100% and see if this solves your problem.