|
CSS - Problems With %100 Height And Div Staying Still.
Link: bitbonton [dot] com
For some odd reason, the %100 height on the left column does not seem to work ... the dotted line ends after the content. Also, there is another problem where if the scroller bar appears on the right because the content is too long, it pushes everything leftward. tried to move the content a bit more to the left, but it seems to remain centered? Thank you for your help! Similar TutorialsTrying to hone my CSS skills, but as usual I'm having trouble with the height property. The page is buzzdphoto dot com / times and you should notice part of the white containing box does not extend to the bottom of the page as it should, instead the content falls past it. I've viewed it in both Firefox 3.5 and IE8 and am getting similar results with both. Any ideas? Hello, Two questions, The first is that I am struggling to get my head round making the min-height work on my page. My page is at http://www.garethgroup.com/test/floatcolumnsattempt/index.html. This is not a commercial website but more of a website of attempted collaborations. I am also wondering if there is a quicker way of opening divs - for example, can you use div id's like this - Code: <div id="div1" "div2" "div3"> Thanks and Kind Regards, Ben. i am working on a practice web site and im having problems. i set the #document div set to min-height:400px; but then the when i input content that overpasses 400px in the col div it goes over the footer div. and if in #document i set height to a specified height it works but then i have to do that for every page specifically. i hope you can help and i explained it ok. here's the code p.s. it works fine in IE go figure but not in FF or chrome i thought that #document would increase in height automatically as #col increased 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>
<link rel="stylesheet" type="text/css" href="9.css" />
</head>
<body>
<div id="Document">
<div id="Header">
<div id="Top_Right">
<ul>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Use</a></li>
</ul>
</div>
<div id="Logo"><a href="#"><img src="Images/guitar102.png" alt="guitar102" /></a></div>
</div>
<div id="Nav"><ul>
<li><a href="#"><img src="Images/home.png" /></a></li>
<li><a href="#"><img src="Images/links.png" /></a></li>
<li><a href="#"><img src="Images/about.png" /></a></li>
<li><a href="#"><img src="Images/contact.png" /></a></li>
</ul>
<hr />
</div>
<div id="Side_Nav">
<ul>
<li><a href="#"><img src="Images/less.png" /></a></li>
<li><a href="#"><img src="Images/art.png" /></a></li>
<li><a href="#"><img src="Images/his.png" /></a></li>
<li><a href="#"><img src="Images/news_.png" /></a></li>
<li><a href="#"><img src="Images/ad.png" /></a></li>
</ul>
</div>
<div id="Col">
<div id="Column1">
<p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p>
<p>Content goes here. Content goes here.</p><p>Content goes here .Content goes here.</p> <p>Content goes here.Content goes here.</p>
<p>Content goes here .Content goes here.</p><p>Content goes here .Content goes here.</p>
</div>
<div id="Column2">
<p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p>
<p>Content goes here. Content goes here.</p><p>Content goes here Content goes here.</p> <p>Content goes here.Content goes here.</p>
<p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p>
</div>
<div id="Column3"> <p>Content goes here.Content goes here.</p><p>C ontent goes here.Content goes here.</p>
<p>Content goes here. Content goes here.</p><p>Content goes here.Cont ent goes here.</p> <p>Content goes here.Content goes here.</p>
<p>Content goes here. Content goes here.</p>
<p>Content goes here.Cont ent goes here.</p>
<p>Content goes here.Content goes here.</p>
<p>Content goes here. Content goes here.</p>
<p>Content goes here.Cont ent goes here.</p>
<p>Content goes here.Content goes here.</p>
<p>Content goes here. Content goes here.</p><p>Content goes here.C ontent goes here.</p></div>
</div>
</div>
<div id="Footer">
<div id="Top_Fot"></div>
<div id="Fot"></div>
<div id="Bot_Fot"></div>
</div>
</body>
</html>
Code: /* CSS Document */
Body{ background-color:#000000;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
margin:0px;
padding:0px;
}
h1{
margin-left:20%;
}
a {
text-decoration:none;
color:#FFFFFF;
}
a:hover {
text-decoration:none;
color:#FFFFFF;}
#Document {
background:url(Images/1.jpg) repeat-y;
background-color:#310606;
color:#FFFFFF;
height:700px;
width:1005px;
}
#Header {
height:154px;
background-color:#310606;
margin:0px; padding:0px;
float:left;
width:1005px;
background:url(Images/header4.png) no-repeat;
}
#Logo {
margin:0px 0 0 5px;
height:120px;
width:200px;}
#Logo img{
border-style:none;}
#Top_Right {
margin:0px;
padding:15px 10px 0 0;
height:100px;
width:150px;
float:right;
}
#Top_Right ul {
list-style:none;
}
#Top_Right ul li{
margin:5px 0 0 0;}
#Col {
margin:5px 0 0 120px;
float:left;
text-align:justify;
padding:10px 10px 10px 10px;
width:780px;}
#Column1{
float:left; width:280px; margin:0 30px 0px 0;
}
#Column2{
float:left; width:210px; margin-right:30px;}
#Column3{
float:left; width:150px;}
#Nav{
width:640px;
height:60px;
float:left;
margin:0 40px 0 125px; padding:0px 0 0 60px;
}
#Nav ul{
margin:0px 0 0 0px; padding:0px 0 0 5px;
}
#Nav ul li{
display:inline;
margin:0px;
padding-left:20px;
list-style:none;
}
#Nav ul li img {
border-style:none;}
#Nav ul li a{
color:#310606;
text-decoration:none;}
#Nav ul li a:hover{
color:#310606;
text-decoration:none;}
#Side_Nav {
height:400px;
position:absolute;
top:156px;
left:0px;
width:120px;
padding:0px 0 0 0px;
margin:2px 0 0 0px;
}
#Side_Nav ul {
margin:0px;
padding:0px;}
#Side_Nav ul li{
display:inline;}
#Side_Nav ul li img{
border:none;
margin:0px;
padding:0px;}
#Footer {
background-color:#000000;
margin:0px;
padding:0px;
width:1005px;}
#Fot {
width:98%;
height:50px;
padding:10px 10px 10px 10px;
background-color:#310606;}
#Top_Fot {
height:11px;
background:url(Images/footer_start.jpg) repeat-x;}
#Bot_Fot {
height:24px;
background:url(Images/bottom.jpg) bottom no-repeat;}
hey.. i have a webdesign _Link here_ but i need it to look like this _picture_ but i can't get the gradient background height: 100%; the borders and content box do i need to get height: 100%; too something like my personal homepage i am new to css designin... plz help me.. my code is this 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin: 0px auto;
text-align: center;
height: 100%;
}
#container {
margin: 0px auto;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
#top_bg{
margin: 0px auto;
left: 0px;
top: 0px;
width: 100%;
height: 151px;
z-index: 2;
background-image:url(images/topbg.gif);
}
#top {
margin: 0px auto;
left: 0px;
top: 0px;
width: 701px;
height: 100px;
z-index: 3;
background-image:url(images/top.gif);
}
#menu_knapper{
float: right;
z-index: 4;
height: 30px;
width: 60px;
top: 100px;
}
#menu {
margin: 0px auto;
z-index: 5;
height: 51px;
width: 701px;
top: 100px;
background-image:url(images/menu.gif);
}
#content_bg {
margin: 0px auto;
z-index: 6;
height: 100%;
width: 100%;
top: 151px;
background-image:url(images/bg.jpg);
background-position: top right;
background-repeat: repeat-x;
}
#logo {
margin: 0px auto;
background-image:url(images/logo.gif);
width: 701px;
height: 114px;
z-index: 7;
left: 29px;
top: 151px;
}
#content {
margin: 0px auto;
width: 701px;
height: 100%;
z-index: 8;
top: 265px;
}
#left_border {
margin: 0px auto;
width: 30px;
height: 400px;
float: left;
background-image:url(images/left_border.gif);
}
#right_border {
margin: 0px auto;
width: 30px;
height: 400px;
float: right;
background-image:url(images/right_border.gif);
}
#content_indhold {
margin: 0px auto;
width: 641px;
float:left;
height: 400px;
background-color: #FFFFFF;
}
#left_footer {
margin: 0px auto;
width: 30px;
height: 30px;
float: left;
background-image:url(images/left_footer.gif);
}
#right_footer {
margin: 0px auto;
width: 30px;
height: 30px;
float: right;
background-image:url(images/right_footer.gif);
}
#footer {
margin: 0px auto;
width: 641px;
float:left;
height: 30px;
background-image:url(images/bottom_border.gif);
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top_bg">
<div id="top">
<div id="menu_knapper">menu</div>
</div>
<div id="menu"></div>
</div>
<div id="content_bg">
<div id="logo"></div>
<div id="content">
<div id="left_border">pik</div>
<div id="content_indhold">dut</div>
<div id="right_border">tis</div>
<div id="left_footer">pik</div>
<div id="footer">dut</div>
<div id="right_footer">tis</div>
</div>
</div>
</div>
</body>
</html>
Hi, I'm developing the following site and am having some issues with spacing and heights. The first and major problem is in Firefox. As you will see at the bottom, my content "grows" out of it's wrapper div for some reason. It works great in IE, where the height of the content will determine how high both the side and main columns are. The second problem is in IE. There is too much space between the menu and the image above it. I want it to be flush to the image, as it is in Firefox. How can I go about solving these two issues? Hi i have a content div inside a container div, the content in the content div stretches automatically but the container div doesnt stretch to accomodate the bigger content div....is it possible to get it to stretch the same as the content? the only solution ifound was to fix the height and set the overflow to auto so that i get a scroll bar but that looks rubbish ;o( cheers Andy Hi, It seems I just can't get away from the height: 100% problems. I tryed making my body 100% and my container min-heaight 100% but that didn't work. I'll post the index and css below. I also want there to be a 15px space between each box 'lightbox, lightbox2, topbox, bottombox.. (they aren't spacing at all?) www.carbenco.com/resume/ index 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" xml:lang="en"> <head> <title>Terry Cantwell - Resume</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" title="default" /> </head> <body> <div id="container"> <div id="topbox">Hi</div> <div class="lightbox">Hi</div> <div class="lightbox2">Hi</div> <div class="lightbox">Hi</div> <div class="lightbox2">Hi</div> <div class="lightbox">Hi</div> <div class="lightbox2">Hi</div> <div class="lightbox">Hi</div> <div id="bottombox">Hi</div> </div> </body> </html> css Code: body {
margin: 0px;
padding: 0px;
text-align:center;
background-color: #3F3727;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
#container {
position: relative; top: 0px;
margin-left: auto;
margin-right: auto;
text-align:center;
width: 600px;
height: 100%;
background-color: #E9E4DC;
}
#topbox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #e9e4dc;
}
.lightbox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #B1A283;
}
.lightbox2 {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #9B8862;
}
#bottombox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #e9e4dc;
}
Hello, I'm new to these forums and I have a question. I am making a website (c-pj.net/lowercase/), and I'm having a problem. If I add too many posts or make a post to long it goes off the page, or at least the text does. What I mean by that is that the text ends up going onto the header and past my content holder image. Can anyone take a look at the source code, and my style sheet and tell me how I could make the height of my content area scale to the proper size, when I try to set it to auto it doesn't display at all. This could be caused by the fact that my content are is absolutely positioned but I'm just looking for some advice hopefully you guys understand my question. My style sheet is located he c-pj.net/lowercase/stylesheets/default.css Hi guys, I am struggling a bit with getting the background of one of my css-created columns to be the height I want it to be. If you have a look at http://www.addictivemedia.com.au/clients/REW/ you will see (depending on your browser) that the left column behaves not the way I want it to: - in IE 6 it creates an additional scrollbar (because it adds the height of the banner at the top to the 100% height I gave to the column) - in all other browsers it is not as long as the column on the right The effect I want to achieve is of course for both columns to have the same height and (if possible) to always push the footer to the bottom of the browser window. I have tried the pushing to the bottom many times and out of previous posts I gather that it probably won't happen for all browsers. But I cannot figure out why the left column doesn't extend as far as the right one. Thanks for your help! i have a page that changes size depending on what is inside it... but i want to set a default size, and if the data goes over that default size, i then want it to autostretch... i think IE will do this... but Firefox will not, it just keeps the set height, and flows the data outside of the div container I have spent more than 6 hours researching and reading to solve these two problems. I have included a complete example in one file to assist others in helping me quickly and easily. Just copy to an HTML file and examine my complete issue. 1. Left black bar needs to match right-column height. 2. Image in left column needs to align to the bottom of the left bar. I tried absolute positioning the left image but it would then over-lap stuff in the left bar if the leftbar was not tall enough. In other words, it didn't take any space anymore and just covered up anything. Code: <html>
<head>
<style tyle="text/css">
body {
width: 850px;
margin-left: auto;
margin-right: auto;
height: 100%;
background-color: #fff;
color: #000;
font: 11pt arial, sans-serif;
}
div.leftbar {
width: 201px;
height: 100px; /* Should Not Be Required--adding for demonstration */
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #000;
color: #ffd600;
float: left;
}
div.rightbar {
width: 670px;
margin: 0px 0px 0px 201px;
padding: 4px;
background-color: #fff;
border: 1px solid #f00; /* Added For Visibility */
}
</style>
</head>
<body>
<div class="leftbar">
Menu (pulled in from php)
<div class="search">
Search
</div>
<div class="leftimage">
<img src=".jpg" />
</div>
</div>
<div class="rightbar">
MAIN CONTENT<br /><br /><br /><br />left bar should stretch to bottom of this column.<br />Image in left column should align to the bottom of the black leftbar. I forced a height on the left bar to show it should touch the bottom (but doesn't) when the height is greater than sized for the content.<br /><br />Thanks for your help!
</div>
</body>
</html>
I have a div that just serves as a horizontal rule, it's 800px wide and 3px high. Firefox renders it properly, but internet explorer is adding 10 pixels totaling 13 pixels high. I have tried the traditional <hr> tag, but it adds an ugly subtle border around it in IE that can't be removed. EDIT: sorry, I forgot to mention that it's internet explorer version 6 The markup: Code:
<div id="header">
<div id="banner">
</div>
<div id="nav">
<div id="floatleft">
</div>
<div id="floatright">
</div>
</div>
</div>
<div id="header_hr">
</div>
<div id="main">
</div>
The CSS: Code:
#header
{
margin:0 auto;
width:800px;
font-size:11px;
}
#banner
{
background-image:url('../images/banner.jpg');
height:29px;
width:800px;
}
#nav
{
width:800px;
}
#floatright
{
float:right;
}
#floatleft
{
float:left;
}
#header_hr
{
background-color:#464646;
clear:both;
height:3px;
margin:0 auto;
width:800px;
border:0;
}
#main
{
width:800px;
margin:0 auto;
}
Here's the output: Below is what I have. Displays fine in FF. In IE, there is approximatly a 13px white space under the image. Can't find an answer to this. Any insight is appreciated. --Sean HTML: <p id="dot"></p> CSS: #dot { position:relative; left: 0px; top: 0px; width:200px; height:6px; background-image: url(dot.jpg); background-repeat: repeat-x; line-height:0pt; margin: 0px; } Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers? Check this out: Test Page. It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred. Thanks, Darin Hey, I have a slight problem... http://www.thecolonyrp.net/chris/hca/ The banner is only partially uploaded, just to let you know why there is just a strip. As you can see, the div on the left aligns left, the div in the middle goes to the middle, and the right div goes right. For SOME reason, the container ignores the left div, the right div gets pushed out of the container, and the center div is just right. Goldy Lox anyone? On top of that, in order for me to make my middle div go middle, I have to cheat and use the margin. Is there any way to perfectly center this? I don't know what's wrong. My style page is : http://www.thecolonyrp.net/chris/hca/style.css I thought I closed a div tag too early or something, but I couldn't figure it out. I think I just need a second set of eyes. And this website has to be done ASAP. Can anyone help me? Thanks. This is probably a dumb question, but I have a div, with a floated image inside. When the div doesn't have enough text inside to make it taller than the image, the image will stick out the bottom of the div. I've attached a couple of images to show what's happening. I want div to stretch around the image at all times, even if there's only one line of text next to it. Code:
<html>
<head>
<style>
body {
width: 800px; /* change this value */
margin: 20px auto;
}
#container {
border: 1px solid #f00;
padding: 10px;
}
.floatright {
float: right;
margin: 10px;
background-color: #aaf;
}
</style>
</head>
<body>
<div id="container">
<h3>some latin text</h3>
<p>
<img class="floatright" src="some_image.jpg" width="100" height="150" alt="Image" />
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
</p>
</div>
</body>
</html>
I have a two column layout. The left-hand column consists of three elements stacked on top of one another. The right-hand column is a little more complicated. I'm having a problem where when I apply float:left to the bottom item in the left-hand column, it screws everything up and all of the stuff from the right-hand column jumps down below the left-hand column stuff. When that bottom item in the left-hand column doesn't float-left, the stuff in the right-hand column stays to the up and to the right where it's supposed to be. The problem is that I need this bottom item to float:left (it's this semi-complicated thing with an extra border around it), but I also of course need the stuff in the second-column to behave correctly. Is there something I can do to make it so the stuff in the right-hand column doesn't jump down to the left no matter what? I think I might be missing something obvious here to make the two columns truly separate. Hello. This is the first time I've tried a complete CSS layout, and I just have one bothersome problem. I have everything inside a #container div. I have a min-height set for the container, since in Firefox if I don't have that it just wraps the border around the background image. No matter where I put the footer div, it hangs over the min-height border. However, if I put footer inside another tag called content ( #content #footer { ) it does stay in. But I don't even have a content div in the css! I'm so confused. *lol* Furthermore, by using Float for the navigation div instead of absolute positioning, it shows up with several pixels difference between IE and Firefox. If anyone could help me with this, I would be much obliged. The page is he http://frenziedsilence.com/nygiml/index.php And the CSS: http://frenziedsilence.dom/nygiml/nygiml.css thanks in advance.. -kathryn |
|||||||