|
HTML - Css 2 Column Layout. Container Height Wont Stretch To Match Both Content And Menu Div
Hi There,
Pulling my hair out over this. For the life of me, cant make it work: http://www.cowboytuffwebsitedesign.c...cialdeals.html I've used positive padding negative margin to stretch both div's heights to match each other. But the content div, when needed to be higher than the menu div, will overflow its content past the container divs bg. As well the footer will only clear past the menu div, not the content div. HELP! PLEASE! I can copy and paste HTML right into the thread if needed. Thanks Similar TutorialsI want to know how to make a div stretch to the full height of a container! Here is the html: 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> <title>This site is currentely out of order! Chack back later.</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container" style="display:block"> <div id="leftside" style="display:block"><img src="images/leftside.gif" alt="" /></div> <div id="logo" style="display:block"> <img src="images/logo.gif" alt="" width="315" height="140" title="" /> </div> <div id="content" style="display:block"> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </body> </html> And then the css: Code: /* START - Master */
div {display:none} /* Keep NO MATTER what - Keep at top */
body {background-color:#000000; background-image: url('images/watermark.gif'); background-repeat: no-repeat; background-attachment: fixed}
#container {width: 85%; margin-left: 7.5%; background-color: #666666; color: #030303}
#leftside {float: left; min-height: 100%; height: 100%; background-image: url('images/leftside.gif'); background-repeat: repeat-y}
/* END - Master */
/* START - Header - No change */
#logo {width: 85%; margin-left: 7.5%; background-color: #7B7B7B; text-align: left; font-size:15pt; border: none}
/* END - Header - No change */
/* START - Content */
/* END - Content */
/* START - Footer - No change */
/* END - Footer - No change */
The "leftside" image is supposed to be the full length of the header + content. Thanks! The layout of this page I'm making requires a centered table, 800 pixels wide and 100% high. I am having huge problems making it fill the entire height of the page though, it just stops rather than going right to the bottom of the page. It's a 4.01 transistional compliant page if that's relevant. Here's a link to the page. Here's a link to the page (apologies for the file size) link to page I want the dark green center section, and the two side cells with tiled graphics to extend right down to the bottom of the page, regardless of height. The center table with the graphics can stay where it is or vertically center, I don't mind about that. I also need it to have no vertical scrollbar when it's viewed fullscreen. If I remove the doctype, it works fine, but I'm wondering if there's a way to have it vaild for that doctype and still look ok? I've tried everything I can think of and am not turning up anything useful with web searches, if anyone can tell me where I've gone wrong and if this is possible to fix in html, I'd really appreciate it. I can't use CSS, and the doctype has to be as it is, because that's what the specs say (it's for an html class). Thanks for any help. Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar Hi, I'm making a website template, and I'm about finished. I'm having trouble though, I want the table on the bottom right, the "MAIN" table with content saying "MAIN" to stretch 100% so even if the typing doesn't reach the end of the table, it will still stretch, and I have no Idea what wrong. Any help would be appreciated. the full code is attachted Hi guys, It's my first time on these forums, and I thought you all would be the best help I could get for my HTML problem. I've just recently created a blog and I am currently using a custom template. I'm not too familiar with HTML, or any sort of coding really, and I would like to stretch the content area of the template so that I could place larger images without it overlapping the grey bars. I have no idea what values to change though or what I should be looking for. Could you guys help me out? Many thanks, AciesEdge Hi all, Current code available for viewing he http://www.joomlatemplatesearcher.com/testtemplate/ I'm trying to position a div so that it sits (near) the bottom of a container. I'd assumed position:relative / bottom: 10px would do the trick, but no joy, and I can't figure out why that's not aligning. If anyone could offer help, I'd be very appreciative. Ultimately I'm trying to get the aqua-coloured box sitting inside the black area of the monitor (aligned from the bottom, as the div containing the monitor background is bottom-aligned to a container with variable height. Any suggestions greatly appreciated. With thanks, - SuperGrover hi there, i am working on a page: http://test.furryfrog.co.uk/rokka/private i cant get the content to clear on the right hand side and extend the content area to 100%? i have tried all manner of clears, end divs, 100%heights but i just cant get it. any help is most appreciated. Regards Neil I am making a website using Dreamweaver CS3. I am actually making a template page that contains 3 columns with a header and footer. I want to make the height of the left and right columns float to match the length of the center column. The center column will always contain more content than the side columns. The code for the left column is below: .thrColAbsHdr #sidebar1 { position: absolute; top: 120px; left: 0; width: 160px; background: #fff9d9; padding: 5px 5px 5px 5px; Any input would be helpful. Thank you i devlope one html page which is working fine in ff but not in ie6, because of height of 1px column is much larger than ff column.. so how can i reduce height of 1px column in ie6. I am very new to HTML and cant figure out why my 3-column layout isnt working. I cant seem to get my columns to line up side-by-side without overlapping ... HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2006 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 9/9/2010 12:48:26 PM -->
<head>
<title>Zone Map</title>
<style type="text/css">
#head {
position: relative;
left: 0px;
width: 250px;
height: 20px;
font-family: times new roman;
line-height: 8px;
font-size: 14pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #c3bd24;}
#content {
left: 0px;
width: 250px;
font-family: times new roman;
line-height: 16px;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #938461;}
#dotted{
width: 225px;
border-top: 2px dotted #c3bd24;
}
#container {
width: 800px;
}
#col_right {
position: relative;
float: right;
width: 250px;
}
#col_center {
position: absolute;
float: center;
width: 250px;
}
#col_left {
position: relative;
float: left;
width: 250px;
}
</style>
</head>
<body>
<p align="center">
<img border="0" alt="" align="left" src="support/image/ZoneMap.png" width="650" height="400"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<div id="container">
<div id="col_left">
<p id="head"><br>ZONE 1: $750 minimum</p>
<div id="dotted"></div>
<p id="content">
NJ*** all,<br>
NY***Long Island to Islip,<br>
MD** to Salisbury,<br>
PA** Pittsburgh-Williamsport-Wilkes Barre,<br>
VA** Richmond-Front Royal,<br>
WV* to Martinsburg, Fairmont,<br>
DE** all</p>
</div>
<div id="col_center">
<p id="head"><br>ZONE 2: $1,500 minimum</p>
<div id="dotted"></div>
<p id="content">
NY** Syracuse-Albany-Long Island,<br>
CT** Hartford-New Haven,<br>
PA** west of Pittsburgh-Erie,<br>
OH** Sandusky-Columbus, Ashland,<br>
VA** south of Richmond-Roanoke,<br>
WV* south and west of Fairmont to Bluefield,<br>
MA* Pittsfield-Buzzards Bay-Monomet</p>
</div>
<div id="col_right">
<p id="head"><br>ZONE 3: $2,500 minimum</p>
<div id="dotted"></div>
<p id="content">
VA** south and west of Roanoke,<br>
TN***Chattanooga-Nashville,<br>
KY** Hopkinsville-Madisonville,<br>
IN***Evansville,<br>
IL***Urbana, Chicago,<br>
MI</p>
</div>
</div>
</body>
</html>
So I found this perfect layout my mathew taylor and Im dissecting it to understand the layout and css. My first questions off the bat are, how does he get the links at the top to be indented? I cant see where he placed the command so that their is an inch of indent and then the links start. Also, how does he make it so the links at the top intersect with a black line the spans the header? I really dont see this in the html where the black line is. And lastly, if i want to create a banner for my website in the header how do i go about doing that in the space above the links and spanning the header. I really want to create a clean title in photoshop and place it there but I dont know what dimension width and heighth to use. Thanks http://matthewjamestaylor.com/blog/perfect-3-column.htm Hi guys, I have a problem. Whenever the left column is larger than the right column, it stretches the div, but the background doesn't go on. The content just flows out. Is there any way I can fix this? http://automata.firephoenixnet.com/74s/ Thanks in advance guys. This is both HTML and CSS-oriented. Current CSS code pertaining to the layout: Code: #listnav {
background: url('../images/listnav-bg.png') top left repeat-x;
width: 25%;
padding: 8px;
float: left;
}
#content {
width: 75%;
padding: 8px;
float: right;
}
#footer {
}
#main-wrapper {
width: 85%;
}
HTML: HTML Code: <div id="main-wrapper">
<div id="listnav">
<!-- some spacer stuff here so i can actually see stuff (no static height set) -->
</div>
<div id="content">
<!-- some spacer stuff here so i can actually see stuff (no static height set) -->
</div>
</div>
The result is that the listnav box shows up on the far right side and the content box shows up below it on the left hand side. Any ideas? :| HI all, Pretty new to web design and I was having some trouble centering my columns, or rather having my columns evenly space between each other in my wrap and from my warp borders. Also, I'm using a background image as my wrap border and for some reason there's a gap at the top and bottom of my pages. HMTL attached Any ideas? Thanks Hi! This is was my blog looks like at the moment: http://neverrgrowold.blogspot.com/ I would like to add a 3rd column to my 2 column layout. I know this will mean resizing the other two columns which I know how to do.. I just have no idea to add another column to the right. Here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>Never Grow Old</title>
<style type="text/css">
#navbar-iframe{height:0; visibility:hidden; display:none;}
body
{background-color: #000;
font: normal 10pt Trebuchet MS;
color: #e5e5e5;
cursor: crosshair;
line-height: 75%;
scrollbar-face-color: #ddd;
scrollbar-highlight-color: #fff;
scrollbar-3dlight-color: #ddd;
scrollbar-darkshadow-color: #ddd;
scrollbar-shadow-color: #fff;
scrollbar-arrow-color::#fff;
scrollbar-track-color: :#ddd;}
a:link, a:visited, a:active
{color: #e5e5e5; text-decoration: none; text-transform: none; font: normal 8pt Trebuchet MS; cursor: normal;}
a:hover
{text-decoration: ; text-transform: None; font: normal 12pt Trebuchet MS; cursor: normal; color: #FF4C79;}
blockquote {font: normal 8pt trebuchet ms; color:#e5e5e5; padding:5px; border-left:7px solid #ddd; background-color:#000;}
blockquote:hover {-moz-border-radius:4px; padding:5px; border:2px solid #000; }
blockquote:first-letter {background: #000; font: italic 15pt "Georgia"; color: #FF4C79;float: padding: 5px; text-transform: uppercase;}
.head
{text-align: center; font-family: impact; font-size:12pt; color:#CCFF66; text-align: left; text-transform: none; line-height: 9pt; font-style: none; background:#000; padding: 5px; }
.content
{font-size: 9pt; font-family: Trebuchet MS;color:#e5e5e5; background: #000; line-height: 14px; padding:10px; border: 2px solid #111; }
.headline1{font:normal 30pt Courier New; color:#e5e5e5; letter-spacing:-3px; text-transform:uppercase; line-height:100%; }
</style>
<script type="text/javascript">
/***********************************************
* Disable select-text script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reDisable(){
return false
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reDisable
}
</script>
<script language=JavaScript>
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
<body>
<div style="position: absolute; top: 10px; left: 188px; width: 500px;">
<span class="headline1"><img src="http://i44.tinypic.com/bfoq69.png"/>
</span><br>
</div>
</div>
<div style="position: absolute; top: 440px; left: 525px; width: 600px;">
<Blogger>
<div class="head">@ <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> </div>
<div class="content"><$BlogItemBody$></div><p>
</Blogger>
</div>
<div style="position: absolute; top: 440px; left: 190px; width: 310px;">
<div class="head">Welcome! </div>
<div class="content">
<div><img src="http://24.media.tumblr.com/avatar_66b2c19ef795_64.png" align="left" /><font color=#e5e5e5>I believe we never truly grow old unless we let ourselves. You'll find anything and everything to do with your childhood if
yyou grew up anywhere between the late 80's to the early 2000's. So sit back, enjoy your stay, and take a trip down memory lane ;)
</font></div>
<p>
</div><p>
<div class="head">Memory Lane.</div>
<div class="content">
ghghghghh
</div><p>
<div class="head">Support</div>
<div class="content">
Place your tagobard here,
<a href="http://cbox.ws">Cbox</a> recommended<BR>
</div><p>
<div class="head">Links</div>
<div class="content">
Place all your links here,<br>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
</div><p>
<div class="head">Looking Backwards.</div>
<div class="content">
<BloggerArchives>
<BloggerArchives>
<a href="<$BlogArchiveURL$>"> <$BlogArchiveName$></a>
</BloggerArchives></a><br><br>
</div><p>
<div class="head">Credits</div>
<div class="content">
Designer @<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>,<br>
Basecode: <a href="http://www.blogskins.com/me/sacrificelove-">sacrifice</a><a href="http://love--bites.blogspot.com">love-</a><br>
</div><p>
</div>
</body>
I've been trying to figure it out with my basic html knowledge for a while now and I can't get it, I would be really appreciative if someone could help me out. Thanks!! Hello, I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup: HTML Code: <div style="width: 100%"> <div style="width: 200px; float:left;">Left column</div> <div style="width: 100%; float:left;">Middle Column</div> <div style="width: 200px; float:left;">Right Column</div> </div> It's not working for me . Please help. Hi there, I'm curious if Dada's previous post does not apply to this somewhat. But basically my problem is I have a div for a nav menu and a div for a content area, basically I want the nav menu to grow as the content of the content div grows. Here is my page and you can see my problem. http://alongcamemary.biz/newSite/index.html Basically what I did in the flow was create one div which I floated right And then the nav div which will be on the left and I set its margin the width of the item I floated right. But like I said I need each of their contents to stay the same heights automatically. Hi there, I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks the site: http://guild-paragon.com/indexframe edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though All right. This may be simple for some people so hopefully I can get some help. Please have a little bit of patience because I'm not positive how to explain exactly to where people will actually understand me. I will, however, try my very best to explain the best I can. If you have any questions about what I'm asking, feel free to ask me... I'm making a hatelisting. They're not huge sites so they only require a very simple layout. Okay, easy. I have the layout set up (except the links) and I have the HTML and CSS ready (well, CSS prepared for editting). I know where I want the layout to align and such... Everything like tha is finished. http://www.lume-di-luna.net/test/index.html As you can see, it looks okay. Nothing big and fancy, something simple. ONE LITTLE DETAIL. The content of the website is just suppose to be in the black part, not the white. The white is just a border. But the only way I ever knew how to align the text was it would be the same size as the size of the background image. http://www.lume-di-luna.net/test/bg.jpg This is the background image. You can only see the black, but there is 10px of white on each side. That's the only way I have figured out so far to get the white border to work and the background as well. I want to align the content so it's only in the black, not the white. I searched everywhere and nothing will help me at all. I'm sure HTML and CSS will have to be involved to get it to work. I've searched multiple ways on google and looked around HTML/CSS help sites and nothing will help me at all. Hello everyone, I am in deep trouble... :-( ... For some reason Safari does not adapt the table height to the content size. All other browsers automatically adapt the table height to the content size, but Safari doesn't, and the result of the website I am developing, when seen on Safari, is a mess... Can someone tell me how to make Safari adapt automatically adapt table height to content size? Thank you very much in advance and anyway... Cheers, John |
|||||||