|
CSS - Make Layout Elements Stretch With Content
CSS newb here and this is my first full CSS page layout ever, so go easy.
Some of the page elements do not stretch properly to match the page content. I also tried to add a few bits to make a sticky footer, and in doing so I sort of confused myself as to where the problem is. Here's a link to the page: http://www.crackin.com/cbled/index.html and here's the code: Code:
body {font: 75% Verdana, Arial, Helvetica, sans-serif;background: #FFFFFF;margin: 0;padding: 0;text-align: center;color: #000000;height: 100%;}
html {height: 100%;}
* html #nonFooter {height: 100%;}
.oneColFixCtr #nonFooter {width: 923px;background: #FFFFFF;margin: 0 auto;border: none;text-align: left;position: relative;min-height: 100%;z-index:3;}
.oneColFixCtr #content {padding: 0 0 56 0; height:auto;}
#mainlayout {position:relative;left:0px;top:0px;width:923px;}
#liberty-header {position:absolute;left:231px;top:0px;width:114px;height:151px;}
#logo-orb {position:absolute;left:0px;top:24px;width:231px;height:156px;}
#header-slogan {position:absolute;left:231px;top:151px;width:692px;height:29px;}
#logo-ledind {position:absolute;left:0px;top:180px;width:231px;height:66px;}
#header-breaktop {position:absolute;left:231px;top:180px;width:692px;height:66px;}
#header-breakbase {position:absolute;left:0px;top:246px;width:923px;height:57px;}
#liberty-main {position:absolute;left:211px;top:303px;width:366px;height:409px;}
#navbarbreak {position:absolute;left:231px;margin-top:10px;width:2px;height:95%;background-color:#BBB; z-index:2;}
#pagecontent {position:absolute;left:253px;top:303px;width:650px;height:10px;}
#navbar {position:absolute;left:0px;top:303px;width:233px;height:350px;}
#navbar-home {float:left;margin-top:15px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-info {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link3 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link4 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar a {display:block;width:100%;height:100%;text-decoration:none;color:#333;background-color:#EEE;padding:4px 0px;}
#navbar a:hover {background-color:#9ADF86;}
#footer {position:relative;width: 923px;margin: -56px auto 0 auto;z-index:4;}
#footer-left {position:absolute;left:31px;top:0px;width:18px;height:56px;}
#footer-bg {position:absolute;left:49px;top:0px;width:825px;height:56px;background-color:#329428}
#footer-right {position:absolute;left:874px;top:0px;width:18px;height:56px;}
#greenbreak-z {z-index:1;}
#greenbreak {position:absolute;left:0px;top:200px;width:100%;height:123px;background:url(images/mainbg_horiz.jpg);background-repeat:repeat-x;}
#page-edges-a {position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;}
#page-edges-b {position:relative;margin:0 auto;width:923px;height:100%;}
#mainbg-leftvert {position:absolute;left:-16px;top:0px;width:16px;height:100%;background:url(images/mainbg_leftvert.png);background-repeat:repeat-y;}
#mainbg-rightvert {position:absolute;left:923px;top:0px;width:16px;height:100%;background:url(images/mainbg_rightvert.png);background-repeat:repeat-y;}
#clear {clear:both;}
-->
</style></head>
<body class="oneColFixCtr">
<div id="nonFooter">
<div id="content">
<div id="mainlayout">
<div id="liberty-header"><img src="images/liberty_header.jpg" width="114" height="151" alt=""></div>
<div id="logo-orb"><img src="images/logo_orb.jpg" width="231" height="156" alt=""></div>
<div id="header-slogan"><img src="images/header_slogan.png" width="692" height="29" alt=""></div>
<div id="logo-ledind"><img src="images/logo_ledind.jpg" width="231" height="66" alt=""></div>
<div id="header-breaktop"><img src="images/header_breaktop.jpg" width="692" height="66" alt=""></div>
<div id="header-breakbase"><img src="images/header_breakbase.jpg" width="923" height="57" alt=""></div>
<div id="liberty-main"><img src="images/liberty_main.jpg" width="366" height="409" alt=""></div>
<div id="navbar">
<div id="navbar-home"><a href="#">home </a></div>
<div id="navbar-info"><a href="#">company info </a></div>
<div id="navbar-link3"><a href="#">link3 </a></div>
<div id="navbar-link4"><a href="#">link4 </a></div>
<div id="navbarbreak"></div>
</div>
<div id="pagecontent" align="justify">
<p>Lorem ipsum, etc etc...</p>
</div>
</div>
</div>
</div>
<!--PAGE DROPSHADOW-->
<div id="page-edges-a">
<div id="page-edges-b">
<div id="mainbg-leftvert"></div>
<div id="mainbg-rightvert"></div>
</div>
</div>
<!--GREEN BACKGROUND-->
<div id="greenbreak-z">
<div id="greenbreak"></div>
</div>
<!--FOOTER-->
<div id="footer">
<div id="footer-left"><img src="images/footer_left.gif" width="18" height="56" alt=""></div>
<div id="footer-bg"></div>
<div id="footer-right"><img src="images/footer_right.gif" width="18" height="56" alt=""></div>
</div>
</body>
</html>
Any help is much appreciated. Similar TutorialsI feel so STUPID. I have DIV[a] inside DIV[a] is DIV[z] DIV[z] is 200px high. there is no height attribute et for DIV[a] shouldnt DIV[a] stretch atleast to fit in DIV[z] You can see here, in firefox, the dark background only comes down 200px. That is because its height is at 200px, i did that so you could see it. If I remove the height attribute, it dissapears completley. The menu and such on the left are within this div, so it should stretch correct? It works fine in IE. If I need to explain more let me know. Thanks i put a div container around all my divs (so i could center them and put a bg and border) and put height at 100% but it only stretches from the top of the viewable page to the bottom. if a text content div stretches beond the page (and i have to scroll) the main content div cuts off. i set body height to 100% also. i cant figure out a way around this other than set the height in PX but since the content will be includes i have no way of know how much will be on each page. is there anyway around this, even if i have to use tables. I am working on this template: http://www.oswd.org/design/preview/id/2790 & I need both the white & green content boxes to stretch as I add content. I don't know if this is even possible but would like to know if there is an easier way than having to create another (more stretched) image. Also as the content will be changing frequently I don't want to have to change from one image to another if I can help it. Appreciate any help you can give. Experimenting with layouts.... How do I get the right-hand DIVs (content = 'two') to automatically stretch down to the same height as the left-hand DIVs (as table cells would): Code:
<HTML>
<HEAD>
<STYLE>
.frame {
margin-left : 5%;
width : 90%;
font-size : 1em;
text-align : center;
}
.header {
width : 800;
border : 0.05em dashed black;
text-align : center;
}
.header1, .header2, .header3 {
float : left;
margin : 1px;
vertical-align : center;
font-size : 0.8em;
position : relative;
border : 0.05em red solid;
}
.header1 {
text-align : right;
width : 750;
}
.header2 {
text-align : center;
width : 40;
}
.clear {
clear : both;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="frame">
<DIV CLASS="header">
<DIV CLASS="header1">One<BR>One Again</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One<BR>One Again</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
</DIV>
</DIV>
</BODY>
</HTML>
I have a layout that has the normal four divs: Header Navigation Content Footer All of the divs are 775 px wide and are centered. The nav is a list of 6 links, and right now they take up very little space relative to the 775px they sit above. I would like them auto fit so that they take up all of the all of the 775px. If it is possible, I would like them to do correct depending on what is typed it, so that I'm giving each a specific px width. I've attached the HTML and the CSS that accompanies it. I'd post a link to a snapshot of it, but I can't post links yet. :x Any help would be greatly appreciated! HTML: Code: <div id="nav"> <ul> <li style="margin-left: 1px"><a href="/link1.html"><span>link1</span></a></li> <li><a href="/link2.html"><span>link2</span></a></li> <li id="current"><a href="/link3.html"><span>link3</span></a></li> <li><a href="/link4.html"><span>link4</span></a></li> <li><a href="/link5.html"><span>link5</span></a></li> <li><a href="/link6.html"><span>link6</span></a></li> </ul> </div> CSS: Code:
body {
background-color: #636c08;
background-image: url(images/background.gif);
background-repeat: repeat-x;
}
h1 {
font: bold 18px Arial, Verdana, sans-serif;
color:#630;
}
#container {
margin: 0 auto;
text-align: left;
width: 775px;
}
#header {
position:realtive;
left:0px;
top:0px;
width:775px;
}
#nav{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
#nav ul{
font: bold 16px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0 2px 0 0;
padding:0;
}
#nav a{
float:left;
color: white;
background: #87A00C url(images/leftcap2.png) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 px 3px;
text-decoration:none;
letter-spacing: 1px;
}
#nav a span{
float:left;
display:block;
background: transparent url(images/rightcap2.png) no-repeat right top;
padding:4px 9px 6px 6px;
}
#nav a span{
float:none;
}
#nav a:hover{
background-color: #C1CF2B;
color: #000000
}
#nav a:hover span{
background-color: #C1CF2B;
}
#nav #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #C1CF2B;
color:#000000;
}
#topbar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
}
#content {
background-color:#EAEEB3;
padding: 8px;
}
#bottombar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
}
#footer {
font: bold 9px Arial, Verdana, sans-serif;
color:#FFF;
text-align:center;
}
Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Greetings: I need to essentially create a table out of DIV tags. The reason is because I need to grant the user the ability to use scrollbars to navigate in a given cell. The problem I am running into, is when the DIV elements fall outside of the wrapper DIV, they wrap to new lines. The DIV "table" within the HTML table is by design. This is because I cannot create a scrollable subset of elements within TD tags. I am simply looking for the way to ensure the following: 1. The DIV "cells" do not wrap (as they are now) and 2. Scrollbars exist to move horizontally and vertically within the "cell" I've experimented with all sorts of combinations of CSS in several of the elements to no avail. Thanks for any help. The HTML for the table: Code: <table id="optionsMatrixTable" border="1"> <thead id="optionsMatrixTableHead"> <!-- <tr id="optionsMatrixTableHeadRow"></tr> --> <tr class="menuRow" id="optionsMatrixMenuRow"> <td colspan="7"> <label><input type="checkbox" id="autoUpdateTrigger" name="autoUpdateTime"checked="checked" /> Live update every</label> <select id="autoUpdateTime" name="autoUpdateTime"><option value="15000" selected="selected">15</option><option value="30000">30</option><option value="60000">60</option><option value="90000">90</option><option value="120000">120</option></select> seconds | Add field <select id="fieldList" name="" style="width: 250px;"></select> </td> </tr> </thead> <tbody id="optionsMatrixTableBody"> <tr id="optionsMatrixTableBodyCallsRow"> <td colspan="7" id="optionsMatrixTableBodyCallsRowContainer"> <div id="callsRowContainer"> <div id="" class="matrixContainerHeader"><div class="matrixContainer">Calls</div><div class="matrixContainer" id="dec08">Dec (19)</div><div class="matrixContainer" id="jan09">Jan (47)</div><div class="matrixContainer" id="mar09">Mar (110)</div><div class="matrixContainer" id="jun09">Jun (201)</div><div class="matrixContainer" id="sep09">Sep (290)</div><div class="matrixContainer" id="dec09">Dec (380)</div></div> <div id="" class="matrixContainer">65 calls</div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainerFooter"></div> </div> </td> </tr> <tr id="optionsMatrixTableBodyPutsContainer"> <td colspan="7" id="optionsMatrixTableBodyPutsRowContainer"> <div id="putsRowContainer"> <div id="" class="matrixContainerHeader"><span class="matrixContainer">Puts</span><span class="matrixContainer" id="dec08">Dec (19)</span><span class="matrixContainer" id="jan09">Jan (47)</span><span class="matrixContainer" id="mar09">Mar (110)</span><span class="matrixContainer" id="jun09">Jun (201)</span><span class="matrixContainer" id="sep09">Sep (290)</span><span class="matrixContainer" id="dec09">Dec (380)</span></div> <div id="" class="matrixContainer">65 calls</div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainerFooter"></div> </div> </td> </tr> </tbody> <tfoot> <tr class="menuRow" id="optionsMatrixEquityInformation"> <td colspan="7">Underlying: MSFT | Last: 20.83 | Change: 1.93 (0.96%)</td> </tr> </tfoot> </table> And the CSS: Code:
#optionsMatrixContainer { border: 1px solid #000; }
thead { font-weight: bold; }
.menuRow { background-color: #999; }
.loading { background-color:#FFFFCC; font-size: 80% }
.matrixItem { padding: 0 5px 0 5px; }
.matrixContainer { border: 1px solid #000; width: 175px; float: left; margin: 1px}
.matrixContainerHeader { clear: both; }
.matrixContainerFooter { clear: both; }
.matrixItemWrapper { padding: 0; margin: 0; }
.top { border-bottom: 0px; }
.bottom { border-top: 1px dashed #000; }
#callsRowContainer, #putsRowContainer { overflow: scroll; white-space: nowrap; display: block; float: left; clear: right; }
Good Day All, I have a basic layout question. In this page, any many others, I have my image element floated to the left of a table. This seems to work well in big resolutions but when I view the page on smaller resolutions, the table gets pushed down below the image. In some cases, this is ok... but if I want to prevent this from happening and keep the img and table together to prevent the dropping, how can I do this? What is the cleanest/easiest way? In the example below, the 4th table from the top is the one that will drop first. Any thoughts greatly appreciated. Also, I would like to keep my liquid layout other than grouping these two items together - and I only need to apply this to a few of them, not all. http://029c92a.netsolhost.com/abrasives/cutmetalm.html Colin Hi everybody I'm having a problem (only in IE) with the following layout http://www.ruthwhiteyoga.com/shop/test2/list.htm The left fixed width column, right fixed width column and centre stretchy column all sit inside a holding div (100% wide) The left column is floated left, the right column is floated right and the centre column has margin left and margin right values that clear the two floated columns The problem is that in IE the floated product divs (in the centre column) ignore the margin-right. As soon as the content ends in the right column the product divs spill into the area that the margin should be keeping them out of (you might need to alter the width of your window to see this happening) I think the problem is that I can't give the centre column a width (100%) because it also needs a margin to force the content in - 100% plus 230px for the left column plus 230px for the right column will totally screw up the page Beyond sticking these three columns into a table (something I really really don't want to do) or using percentage for all three columns (so I can give the centre column a width value) is there anything I can do about this. Really appreciate any help I have a 3 column layout which is working fine so far except for one thing: the content in the 3rd column is pushed down, and starts at the horizontal level where the content in the center column finishes. How do I prevent that from happening, and make the 3rd column content start at the top like the other 2 columns? This is the CSS: Code: /*container div*/
#container {
width: 770px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0; margin-top: 0;
padding: 0px;
text-align: left;
font-size: 11px;
}
#contentleft {
width: 180px;
background: #fff;
float: left;
margin: 0;
border-left: 1px solid #000; border-right: 1px solid #000;
}
#contentcenter {
width: 454px;
padding: 0px;
float: left;
margin: 0;
}
#contentright {
width: 136px;
padding: 0px;
float: right;
margin: 0;
border-left: 1px solid #000; border-right: 1px solid #000;
}
Hi, I am trying to wrap my head around a certain layout that I want to create. Hear is a link to a mockup of what it would look lik... I am curious if it is possible to add an element like the one I have marked with a "?". If so could you please share with me some further details. REgards Chad So I'm trying to debug some major issues in IE6. In both my "Home" page and in my "Bio and Press" page my mainbody div and my mainbodyalt div are broken out of the three column laaout and the two column layout and pushed to the bottom of the other div columns. I am stumped as to why this is doing this, may I have some help on the subject please. Here is the link: http://www.lonniebruhn.com/sitelab/index.html Both pages validate Thank you LB hi I am shifting to web 2.0 therefore learning a lot of things that I used to do with tables. Now I have a task to make a form and also display text in parallel style e.g Name User Name ------- Rating stars Email User Email ------- Balance amount to accomplish this in tables we might make two cells to hold Name, EMail in one and Rating and Balance in the second then in each CELL further rows and cells for each entity e.g Name User Name how can we display this kinda info using pure CSS? I found a website online http://www.compare-voip.net/viatalk.php there towards the bottom you can see how the email and rating stats are displayed in two columns, this is done with tables though I want to do the same with CSS only thanks in advance I've looked over a couple of answers and they didn't seem to help me. I have a css "container" box defined like so, containing another "content" box. I'd like the container's height to stretch to contain whatever is in the content box. #container { width: 720px; height:????????????????; margin: auto; text-align: left; position: relative; } #content { position: relative; left:125px; top: 105px; width:500px; border:0px solid #000; } with html like so: <div id="container"> <div id="content"> </div> </div> The content always spills over, unless I set overflow, but that does not solve the problem. if you didnt understand the subject i'll try and explain it a bit better here! This is my problem in IE my page looks like this http://www.readyflowers.com.au/div-fill.gif But what i want is when there is no content for those divs not to appear so it would look like this (In firefox it works!) http://www.readyflowers.com.au/div-fill-firefox.gif Hi, I have a content box inside a layer in Dreamweaver and I want to be able to align this content box to the right hand side of the layer, rather than on the left side. Is it possible to do this? Here is the code: Code:
<head>
<style type="text/css">
.xsnazzy h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #d76f0a;
}
.xsnazzy p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xsnazzy {
background:transparent;
width:180px;
float:left;
margin-right:10px;
}
.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #d76f0a;
border-right:1px solid #d76f0a;
}
.xb1 {
margin:0 4px;
background:#d76f0a;
}
.xb2 {
margin:0 3px;
border-width:0 1px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}
.xboxcontent {
display:block;
background:#fff;
border:0 solid #d76f0a;
border-width:0 1px;
}
.color_a {
background:#f69b43;
color:#fff;
}
.color_b {
background:#d76f0a;
color:#000;
}
.color_c {
background:#758279;
color:#fff;
}
</style>
</head>
<body>
<div id="Layer9" style="position:absolute; width:176px; height:115px; z-index:8; left: 332px; top: 157px;">
<div align="center" class="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div align="center" class="xboxcontent">
<h1 align="center" class="color_a"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Shopping
Basket</font></h1>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b> <b class="xb2"></b><b class="xb1"></b></b>
</div>
</div>
</body>
Ok, I have basic CSS knowledge but need some help. Here's what I'd like to do: I take trips and post pictures on my site. I use lighthouse to display the images, so each image has a separate filename and caption, and each group of images has a separate group name. Under "Ski Trip", for instance, I'll have Img 1, "Skiing"; Img 2, "More skiing"; etc. It's relatively tedious to create page after page that uses the same format. I use CSS for style, the menu, and Lighthouse, but is there way that I could create a new page entitled "New ski trip.html" and in that file just have a list of the image filenames, captions, etc., that end up all using the same html format to display the images? I don't think I'm being terribly clear (sorry) ... big kudos to anyone who can help. Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem. If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons: http://bit.ly/gL9sA8 The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway. In other words, how would you code the DIV tag so that the following two things happen: 1. It's always in view on the LEFT side of the webpage 2. The main DIV stops against it, and doesn't overlap it if resized As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that. Here is the current code for that left sided DIV column: Code: <div style="position:fixed; margin-left: -180px; top: 75px;"> // My html content for mini You Tube video & button is here </div> The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window. My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now. If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction! |
|||||||