473,394 Members | 1,658 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > html columns defined using divs and css

Join Bytes to post your question to a community of 473,394 software developers and data experts.

HTML columns defined using DIVs and CSS

This is driving me a bit crazy now. I've got a page with 3 columns. However the 3 columns are divided up into horizontal rows. In the central column of hte horizontal row the content can be of variable size, but greater than a minimum size. The columns to the left and right of this centre column contain shadow images and so the div height needs to change with the container content. Now I can't get this to work at all. Here is the code as it stands, the middlecontainer is the one which i want to contain variable sized content. The CSS AND HTML are in sepaarate files. Any help much appreciated.

CSS:
Expand|Select|Wrap|Line Numbers
  1. /* CONTAINERS */
  2. .contentcontainer
  3. {
  4.     position:relative;
  5.     margin-left:auto;
  6.     margin-right:auto;
  7.     top: 20px;
  8.     width: 1000px;
  9.  
  10. }
  11.  
  12. .topsectioncontainer
  13. {
  14.     clear: both;
  15.     margin: 0px 0px 0px 0px;
  16.     padding: 0px 0px 0px 0px;
  17.     position: relative;
  18.     height:100px;
  19. }
  20.  
  21. .menusectioncontainer
  22. {
  23.     clear: both;
  24.     position: relative;
  25.     height: 30px;
  26. }
  27.  
  28. .middlesectioncontainer
  29. {
  30.     clear: both;
  31.     border: solid 1px #000000;
  32.     position: relative;
  33. }
  34.  
  35. .gapsectioncontainer
  36. {
  37.     clear: both;
  38.     position: relative;
  39.     height:5px;
  40. }
  41.  
  42. .footersectioncontainer
  43. {
  44.     clear: both;
  45.     position: relative;
  46.     height: 30px;
  47. }
  48.  
  49. .footermenusectioncontainer
  50. {
  51.     clear: both;
  52.     position: relative;
  53.     height: 30px;
  54. }
  55.  
  56. /* SPACERS */
  57. .leftspace
  58. {
  59.     border: solid 1px #000000;
  60.     background-color:#ffccff;
  61.     float: left;
  62.     width: 110px;
  63.     height: 100%;
  64. }
  65.  
  66. .leftspacer
  67. {
  68.     border: solid 1px #000000;
  69.     background-color:#ffffcc;
  70.     float: left;
  71.     width: 110px;
  72.     min-height: 100px;
  73.     height: 100%;
  74. }
  75. .rightspace
  76. {
  77.     background-color:#ccffff;
  78.     float: right;
  79.     width: 116px;
  80.     height: 100%;
  81.     border: solid 1px #000000;
  82. }
  83.  
  84. /*SECTIONS*/
  85. /*sections.width*/
  86. .topsection, .gapsection, .middlesection, .footersection, .footermenusection, .mainmenusection
  87. {
  88.         width: 768px;
  89. }
  90.  
  91. /*sections.defines*/
  92. .topsection 
  93. {
  94.     float:left;
  95.     height:100px;
  96.     position:relative;
  97. }
  98.  
  99. .gapsection
  100. {
  101.     float:left;
  102.     height:5px;
  103.     position:relative;
  104. }
  105.  
  106. .mainmenusection
  107. {
  108.     float: left;
  109.     height: 30px;
  110. }
  111.  
  112. .middlesection
  113. {
  114.     float:left;
  115.     padding: 0 0 0 0;
  116.  
  117.     /*fa2c574521*/
  118. }
  119.  
  120.  
  121. .footersection
  122. {
  123.     float: left;
  124.     position:relative;
  125.     padding: 0 0 0 0;
  126.     height: 30px;
  127. }
  128.  
  129. .footermenusection
  130. {
  131.     float: left;
  132.     position:relative;
  133.     padding: 0 0 0 0;
  134.     height: 30px;
  135. }
  136. .finalfooter
  137. {
  138.     clear: both;
  139.     position: relative;
  140.     width: 100px;
  141.     background-color: Green;
  142. }
  143.  
  144. /* SECTION CONTENT */
  145.  
  146. .logo
  147. {
  148.     position: relative;
  149.     top: 0;
  150.     left: 0;
  151.     width: 555px;
  152.     height:100px;
  153. }
  154.  
  155. .loginbox 
  156. {
  157.     position: absolute;
  158.     text-align:center;
  159.     width:220px;
  160.     top: 0;
  161.     right:0;
  162. }
  163. .middlesectioncontent
  164. {
  165.     float:left;
  166.     top:0;
  167.     left:0;
  168.     width: 551px;
  169. }
  170.  
  171. .submiddlesectioncontent
  172. {
  173.  
  174. }
  175.  
  176. .middlesectionsidebar
  177. {
  178.     float: right;
  179.     width:217px;
  180.     top: 0;
  181.     right:0;
  182. }
  183.  

HTML
[html]
<!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>Untitled Page</title>
<link href="CSS/MasterPagePositioningStyles.css" rel="stylesheet"
type="text/css" />
<link href="CSS/MasterPageVisualStyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="contentcontainer">
<div class="gapsectioncontainer">
<div class="leftspace"></div>
<div class="gapsection"></div>
<div class="rightspace"></div>
</div>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<div class="topsectioncontainer">
<div class="leftspace"></div>
<div class="topsection">
<div class="logo">
logo
</div>
<div class="loginbox">
loginbox
</div>
</div>
<div class="rightspace">
</div>
</div>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<div class="gapsectioncontainer">
<div class="leftspace"></div>
<div class="gapsection"></div>
<div class="rightspace"></div>
</div>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<div class="middlesectioncontainer">
<div class="leftspacer" >left
</div>
<div class="middlesectioncontent" >
<div class="submiddlesectioncontent">
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
TOO MUCH CONTENT GOES HERE<br />
</div>
</div>
<div class="rightspace">right</div>
</div>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<div class="gapsectioncontainer">
<div class="leftspace">
</div>
<div class="gapsection">
</div>
<div class="rightspace">
</div>
</div>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<div class="footersectioncontainer">
<div class="leftspace">
</div>
<div class="footersection">
footer goes here
</div>
<div class="rightspace">
</div>
</div>

</div>
</body>
</html>[/html]
Dec 13 '07 #1
5 1524
drhowarddrfine
7,435 Expert 4TB
One thing that may be causing problems is your comments. A comment tag has only two hyphens but you have a string of them. This is invalid but I don't recall if that affects anything.
Dec 13 '07 #2
One thing that may be causing problems is your comments. A comment tag has only two hyphens but you have a string of them. This is invalid but I don't recall if that affects anything.
Doesn't seem to make any difference. There is a space after the <!-- comment start, so I don't think it is illegal
Dec 13 '07 #3
drhowarddrfine
7,435 Expert 4TB
Yes, I didn't notice that. But the validator is still insisting your many hyphens is still a parsing error, 420 to be exact. So if their parser can't read it, I can't help but wonder how a browser handles that.
Dec 13 '07 #4
drhowarddrfine
7,435 Expert 4TB
Why are you using 'spacers'? That's what margins/padding are for.
min-height only works in modern browsers and not IE.
Dec 13 '07 #5
The spacers actually contain graphical content. It's just my nomenclature.
Dec 14 '07 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

0
using divs
by: Michael Hill | last post by:
I have created a test page with a window in it created by using divs, but I haven't figured out how to move the "down arrow" to the bottom of the main div. http://www.hulenbend.net/test2.html ...
HTML / CSS
0
Table cells of equal height using divs
by: Thomas Mlynarczyk | last post by:
Hello! I want a table-like layout (2 x 2 cells), but as it's not tabular data I want to do it with divs and CSS. Here's what I have come up with so far (using an HTML 4.01 Strict doctype): ...
HTML / CSS
6
item not defined using Mozilla?
by: LRW | last post by:
I have a Javascript that makes a tablerow visible ot invisible, that works fine in InternetExplorer, but in Mozilla it's unresponsive and I get the following Javascript Console error: Error:...
Javascript
2
Sending HTML formatted mail using CDONTS
by: Paul Turley | last post by:
Does anyone have some sample code for sending an HTML formatted message using CDONTS? Thanks RE: Sending HTML formatted mail using CDONTS -- Paul Turley, MCSD, MCAD, MCT, MSF...
ASP.NET
3
Page layout using DIVs and CSS
by: Carl Gilbert | last post by:
Hi I am looking to convert a site from HTML to ASP.NET making use of CSS. I have tried various combinations but I can not seem to get the correct combination of div and CSS tag configurations....
ASP.NET
1
Using DIVs for a horizontal menu
by: brixton | last post by:
Hello, silly problem maybe, but... I'm trying to get a horizontal menu to work with DIVs but I'm having trouble getting the menu items to "fill" the menu DIV. Basically I have a surrounding...
HTML / CSS
2
Major problems with CSS layouts using DIVs and SPANs
by: Liam Gibbs | last post by:
Hello everyone, This will be my third time posting this, but for some reason, my message isn't get through to the newsgroup, even after hours of waiting. So here goes again. I'm having huge...
HTML / CSS
0
How to create a new row of boxes using divs?
by: William Leigh | last post by:
Hi guys, Hope someone can help. I have a webpage that I need to adjust the layout on and it is in divs and I've not used them before. The page as it currently looks is here:...
HTML / CSS
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!