473,626 Members | 3,083 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

HTML columns defined using DIVs and CSS

3 New Member
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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitl ed Page</title>
<link href="CSS/MasterPagePosit ioningStyles.cs s" rel="stylesheet "
type="text/css" />
<link href="CSS/MasterPageVisua lStyles.css" rel="stylesheet " type="text/css" />
</head>
<body>
<div class="contentc ontainer">
<div class="gapsecti oncontainer">
<div class="leftspac e"></div>
<div class="gapsecti on"></div>
<div class="rightspa ce"></div>
</div>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<div class="topsecti oncontainer">
<div class="leftspac e"></div>
<div class="topsecti on">
<div class="logo">
logo
</div>
<div class="loginbox ">
loginbox
</div>
</div>
<div class="rightspa ce">
</div>
</div>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<div class="gapsecti oncontainer">
<div class="leftspac e"></div>
<div class="gapsecti on"></div>
<div class="rightspa ce"></div>
</div>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<div class="middlese ctioncontainer" >
<div class="leftspac er" >left
</div>
<div class="middlese ctioncontent" >
<div class="submiddl esectioncontent ">
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="rightspa ce">right</div>
</div>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<div class="gapsecti oncontainer">
<div class="leftspac e">
</div>
<div class="gapsecti on">
</div>
<div class="rightspa ce">
</div>
</div>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<div class="footerse ctioncontainer" >
<div class="leftspac e">
</div>
<div class="footerse ction">
footer goes here
</div>
<div class="rightspa ce">
</div>
</div>

</div>
</body>
</html>[/html]
Dec 13 '07 #1
5 1539
drhowarddrfine
7,435 Recognized Expert Expert
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
woodced
3 New Member
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 Recognized Expert Expert
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 Recognized Expert Expert
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
woodced
3 New Member
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
1624
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 I was looking for a style property like float:bottom but I guess there isn't one. I don't want to use any hard positional values like left: and top: Any help is appreciated.
HTML / CSS
0
3121
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): div.table {position:relative; width:100%;} div.row {clear:both; padding-top:2%;} div.left {float:left;} div.right {float:right;}
HTML / CSS
6
3610
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: itemeditrow is not defined Source File: editform.php Line: 45 Below is the Javascript, and a section of the HTML for that tablerow. I don't get it. It looks defined to me. What am I missing?
Javascript
2
1746
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 Practitioner, A+ Technician
ASP.NET
3
1822
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. I have uploaded a screenshot (http://www.bwbfc.com/math/regions.jpg) of how the screen will be laid out. Firstly it is all cantered in the window. I plan to create a master page which would contain the header (in blue), the footer (in yellow)...
ASP.NET
1
2247
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 DIV as the menu tag and then as menu items I have four DIVss, with "display:inline" in the CSS to get them to line up horizontally. What I want to do is to give them each a width of 25% of the surrounding DIV to make the menu look nice. But I'm not...
HTML / CSS
2
1623
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 problems with a site I'm creating for a church. I'm trying to use DIVs and SPANs for the layout, not a table, but I'm honestly thinking of just going with the table since it's MUUUCCCCHHH less of a headache. My page can be found at...
HTML / CSS
0
1430
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: http://violetproductions.com/portfolio.html I want it to look like this: http://i51.tinypic.com/dy3kee.jpg
HTML / CSS
0
8259
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
General
0
8192
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
Windows Server
0
8637
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
Online Marketing
0
8502
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
General
1
6119
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
Microsoft Access / VBA
0
4090
Trying to create a lan-to-lan vpn between two differents networks
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
Networking - Hardware / Configuration
0
4195
Windows Forms - .Net 8.0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
Visual Basic .NET
1
2621
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
C# / C Sharp
2
1504
bsmnconsultancy
Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
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
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us