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
Related
<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;
I am brand new to CSS so please forgive me if this is a foolish problem.
I have created a footer with 3 embedded div's of 33.33% of the width inside of it. For some reason the text that I am putting into each div is half in and half out of the bottom of the div. This is driving me insane. Could someone please explain why this is happening?
Here is my XHTML:
<! DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 strict//EN" "http://www.3org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/xml; charset=utf-8" />
<title>www.BLeeOBS.com</title>
<link rel = "stylesheet"
type = "text/css"
href = "twoCol.css" />
</head>
<body background="images/brick.jpg">
<div id="body">
<div id="head">
<h1>B. Lee Oil Burner Service</h1>
</div>
<div id="head_right">
<h1></h1>
</div>
<div id="left">
<h2></h2>
</div>
<div id="right">
<h2></h2>
</div>
<div id="footer">
<div id="footer1">
<h3>Fully Insured</h3>
</div>
<div id="footer2">
<h3>HIC# PA088378</h3>
</div>
<div id="footer3">
<h3>©2013</h3>
</div>
</div>
</div>
</body>
</html>
Here is my CSS:
#body {
margin-left: auto;
margin-right: auto;
background-image: url("images/bggradient.jpg");
text-align: center;
background-repeat: repeat-x;
width: 768px;
height: 1024px;
}
#head {
background-image: url("images/horizontalpipe.png");
background-repeat: repeat-x;
float: left;
height: 90px;
width: 678px;
}
#head_right {
background-image: url("images/elbow.png");
float: left;
width: 90px;
height:90px;
}
#left {
float: left;
height: 904px;
width: 678px;
}
#right {
background-image: url("images/verticalpipe.png");
background-repeat: repeat-y;
float: left;
width: 90px;
height: 904px;
}
#footer {
background-color: gray;
color: white;
height: 30px;
width: 768px;
clear: both;
}
#footer1 {
height: 30px;
float: left;
width: 33.33%;
}
#footer2 {
height: 20px;
float: left;
width: 33.33%;
}
#footer3 {
height: 20px;
width: 33.33%;
float: left;
}
my page can be viewed here to see what's happening:
http://www.bleeobs.com/bricksswf.html
the white text should be entirely in the grey box (my div) but as you can see it is halfway out.
Also, I'd like to bring the text "B. Lee Oil Burner Service" a little bit higher in the header. Setting the padding doesn't seem to help at all.
Any help would be greatly appreciated.
I'm not sure why but the margins are being set by "user agent stylesheet" I see here:
THe immediate fix is setting
h3 { margin: 0 }
or however you want it. According to this Chrome user agent stylesheet overwriting my site style you might want to look into the correct fix. It may be having the desired at the top of your document (perhaps for html 5)or it might be broken css somewhere.
edit: Looks like Adrift might be correct about the default browser styles needing to be reset. You can use a reset.css like he's suggesting.
Here's a simple puzzle that's been frustrating me for a while today:
Consider this page markup:
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
How can I get div#content centered in the page regardless of viewport width?
I've tried a variety of tricks (including text-align: center; display: inline-block;) and absolute positioning, but with all of them the div#content is left-aligned when the browser window is brought under 750px in width.
I've seen a few high-profile websites do this in the past. For example on Apple.com when they advertised the new retina iPad: the iPad pictured was a very wide image that extended past the main page area (note it was not a CSS background image of the <body> element), but it didn't cause scrolling when the browser window only fit the main page content. Unfortunately I can't seem to find any existing sites that do this so I can't find a reference.
Thanks.
Is this it? Take a look -> http://jsfiddle.net/joplomacedo/CkvuG/
HTML
<div id="page">
<div id="main">
<div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
</div>
</div>
CSS
#page {
overflow: hidden;
min-width: 200px; /*same as #mains width*/
}
#main{
position: relative;
height: 500px;
width: 200px;
margin: 0 auto;
background-color: lightgreen;
}
#extended-out {
height: 200px;
margin: 0 -100px;
background: indianred;
border: 1px solid red;
}
#extended-out img {
width: 100%; height: 100%;
}
http://jsfiddle.net/CNNcV/
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange;
margin:0px auto;
width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
Is that what you're looking for?
Add margin: auto to this,
#content { width: 750px; height: 100px; background: orange; margin: auto}
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.