|
CSS - Two Major Css Problems Div Height; Img Align
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>
Similar TutorialsHey, I have been looking EVERYWHERE for a solution and there seems to be none just quite yet. I've searched google and all sorts of help forums... and still zip, nothing. What I want to do is vertically-align the text in this example: http://www.tri-m.com/test.html in the middle of the white space. The problem though is that there is an unknown height of the whitespace because I want it to be that no matter what size you size the window, the content will always be vertically aligned... so I'm pretty stuck on how to do this. I'm needing the solution for this desperatly and I have been searching and trying everything for weeks. If anyone could help that would be VERY VERY apperciated. Thank you sooo much to everyone that tries this out. Once again here is the Example: http://www.tri-m.com/test.html Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tri-M Systems INC.</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
body
{
color:#000;
}
#container-page {
background:#fff;
width:100%;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */
position:relative;
text-align:left;
margin:0 auto;
}
#container-head
{
background:#fff;
}
#header
{
background-color:#0000FF;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:81px;
position:relative;
}
#container-content
{
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
text-align:center;
position:relative;
padding: 0 0 162px 0;
}
#container-content:after
{
height:0;
clear:both;
display:block;
content:".";
visibility:hidden;
}
#content-sec ul,#content-sec ul li {
list-style: none none;
}
#container-foot
{
background-color:#ff0000;
width:100%;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:162px;
position:absolute;
bottom:0 !important;
bottom:-1px; /* For Certain IE widths */
}
#foot
{
height:162px;
}
</style>
</head>
<body>
<div id="container-page">
<div id="container-head">
<div id="header">
</div><!-- END "header" -->
</div><!-- END "container-head" -->
<div id="container-content">
<center>
<div id="box">VERTICAL ALIGN THIS IN WHITE SPACE</div> <!-- END "box" -->
</center>
</div><!-- END "container-content" -->
<div id="container-foot">
<div id="foot">
</div><!-- END "foot" -->
</div><!-- END "container-foot" -->
</div><!-- END "container-page" -->
</body>
</html>
- Jacenta Hey, Here is an example of code for one of my links where I attempted to align the link "Entry Form" to the middle of the image, what am I doing wrong? Code: <p class="NavigationOption" id="Nav_Entry" line-height=32px text-align=middle><img src="../links/entryform.jpg" border=0></img> <a class="NavigationLink" id="NavLink_Entry" href="<?= ptpr; ?>members/index.php"><font color= #555555>Entry Form</a></p> Hi! Is it possible to align vertically block elements in a fixed-height (unknown) container? If not, this is a serious shortcoming of the css model of placing objects on the screen. Thanks! After five plus hours of work last night on a layout which can be found here ( http://www.politicalanalyst.net/test.php ) I have a layout that works.. but only in Safari. I'm going to grab the stylesheet for connivence sake. I know my way around CSS but I'm self taught and I frequently run into these kinds of problems, I really appreciate any help. Safari Screen ... the way it should look ( http://www.politicalanalyst.net/safari_screen.png ) Firefox ... t3h b0rk3n ( http://www.politicalanalyst.net/firefox_screen.png ) And the CSS stylesheet can be found here ( http://www.politicalanalyst.net/test.css ) Thanks again, Max Hi, I'm trying to vertically align an element in my layout which is xhtml strict but it's not working. Here's the page: http://www.valeit.com/ben/test.htm The text should be vertically aligned in the middle of the layout but I can't seem to work it out. All the CSS is on the page - can anyone see what I'm doing wrong? Many thanks Kevin im sure this may be answered somewhere on this forum inside another post, but using search, i could not find anyone who had actually asked this specific question... i found a few posts back in 2002 that never got a responce... i'd hope we'd have an answer 3 years later... anyhow, my question is quite simple... i think.. i have a div that is 50px in height, and has some text inside it.. the text aligned center, and now i want it to vAlign center.. but the CSS doesnt seem to work... my problem is that the text in that field changes quite often, and having to constantly change margins in CSS would be a pain. anyhow, now for a snippit Code:
.advertboxtitle {
margin:10px 0px 0px 110px;
height:50px;
border:1px dashed #900;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#CCFFFF;
font-weight:bold;
text-align:center;
}
.advertboxtitlevalign {
vertical-align:middle;
}
Code: <div class="advertboxtitle"> <span class="advertboxtitlevalign">From X-Box to Xbox</span> </div> anyhow, reason why it is in a span is because i read that inline elements react to vertical-align:middle... but apparently not... anyhow, here is a link.. http://defunctgames.com/helpfix/middle.htm the text needs to be align verticaly in the dashed red box. thanks Hi all, I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified. How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments. Thanks in Advance. - John 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;}
Trying 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. 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>
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 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! 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 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;
}
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 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 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: |
|||||||