www.webdeveloper.com
Results 1 to 6 of 6

Thread: The uncooperating div

  1. #1
    Join Date
    May 2012
    Posts
    17

    Exclamation The uncooperating div

    Hello folks,

    I'm having a hard time trying to figure this out. Maybe I'm asking too much from this CSS layout?

    First thing's first: I'm creating a webpage which is exactly the same layout as the one I created for this demonstration. The one I'm working on is not live yet. The problem of course was recreated in the demo version.

    Here's the HTML & CSS first:

    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>
    <style type="text/css">
    #mainWrapper {
    	width: 1200px;
    	height: 2500px;
    	background-color: #CFF;
    	margin-left: auto;
    	margin-right: auto;
    }
    #mainNav {
    	height: 150px;
    	background-color: #CFC;
    }
    #wrapper {
    	height: auto;
    	width: 1200px;
    	background-color: #99F;
    }
    
    #wrapper:after{
    	display:block;
    	content:" ";
    	clear:both;
    }
    #wrapper #sidebar {
    	width: 250px;
    	background-color: #600;
    	float: left;
    	margin-left: 35px;
    }
    #wrapper #sidebar #top {
    	height: 150px;
    	background-color: #69C;
    }
    #wrapper #sidebar #body {
    	background-color: #CC9;
    	height: 100%;
    }
    #wrapper #sidebar #bottom {
    	height: 100px;
    	width: 100%;
    	background-color: #396;
    }
    #wrapper #header {
    	height: 160px;
    	width: 880px;
    	float: right;
    	background-color: #960;
    	margin-right: 35px;
    }
    #wrapper #rightSideDiv {
    	width: 645px;
    	height: 560px;
    	float: right;
    	margin-right: 35px;
    	margin-top: 20px;
    	background-color: #36C;
    	display: table;
    }
    #wrapper #leftSideDiv {
    	height: 560px;
    	margin-top: 20px;
    	float: right;
    	background-color: #990;
    	width: 215px;
    	margin-right: 18px;
    }
    #wrapper #otherContent {
    	height: 100%;
    	width: 880px;
    	margin-top: 20px;
    	margin-right: 35px;
    	float: right;
    	background-color: #FFF;
    }
    #wrapper #otherContent #div1 {
    	height: 616px;
    	width: 880px;
    	background-color: #C60;
    }
    #wrapper #otherContent #div2 {
    	height: 283px;
    	width: 880px;
    	margin-top: 20px;
    	background-color: #C90;
    }
    #wrapper #otherContent #div3 {
    	height: 283px;
    	width: 880px;
    	margin-top: 20px;
    	background-color: #CC0;
    }
    #wrapper #otherContent #div4 {
    	height: 283px;
    	width: 880px;
    	margin-top: 20px;
    	background-color: #CF0;
    }
    #wrapper #otherContent #div5 {
    	height: 283px;
    	width: 880px;
    	margin-top: 20px;
    	background-color: #CF9;
    }
    #footer {
    	height: 150px;
    	width: 100%;
    	clear: both;
    	background-color: #999;
    }
    </style>
    </head>
    
    <body>
    <div id="mainWrapper">mainWrapper
      <div id="mainNav">mainNav</div>
      <div id="wrapper">wrapper
      
        <div id="sidebar">sidebar
          <div id="top">top</div>
          <div id="body">body</div>
          <div id="bottom">bottom</div>
        </div>
        
        <div id="header">header</div>
        <div id="rightSideDiv">rightSideDiv</div>
        <div id="leftSideDiv">leftSiteDiv</div>
        
        <div id="otherContent">
          <div id="div1">div1</div>
          <div id="div2">div2</div>
          <div id="div3">div3</div>
          <div id="div4">div4</div>
          <div id="div5">div5</div>
        </div>
        
      </div>
      <div id="footer">footer</div>
    </div>
    </body>
    </html>
    Basically, the entire layout seems to work except for one div that just won't function the way I want it to. The div I'm referring to is the "sidebar" div. This div has three additional divs within it, as you can see. The div within the "sidebar" div that I'm mainly concerned with is the "body" div. What should happen is that the entire sidebar should expand to fit the vertical space below it. It should do this dynamically when I add new content to the "wrapper" div. The wrapper div also expands dynamically. But here's the catch: the sidebar itself should not expand due to its own property. Rather, the sidebar should expand when the "body" div expands. So in essence, the body div is the one that should have the property of "height: 100%" or whatever, but is exactly the problem: No matter the property I add to the "sidebar" div or the "body" div, the parent div (sidebar) will not budge. I don't know what is holding it back but I have a feeling it has to do with all the floats involved in this layout.

    I made this layout too complicated for myself and I just don't know what to do to fix it. I have spent hours.

    Any help will be appreciated.

    Thanks

  2. #2
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    Your description in words is not conveying what your problem is. I tried playing with things based on what you said, but I am not following. I have attached an image of what I am seeing as well as changing the markup and CDATA.

    I recommend that you add the "content" you are talking about that produces the unwanted effect, and post the HTML and maybe a screencap, along with your description in words.

    Two more things:

    1. is there any reason you particularly want to use XHTML?? HTML 5 or HTML 4.01 Strict with validation is usually easier as it doesn't force things like explicit closing tags on table cells and rows and paragraphs.

    2. I am not sure why you are using a hierarchy of id-selectors such as "#wrapper #otherContent #div3" when it seems "#div3" will do by itself. Is there any particular reason for your doing this?


    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #mainWrapper {
    	width: 1200px;
    	height: 2500px;
    	background-color: #CFF;
    	margin-left: auto;
    	margin-right: auto;
    }
    #mainNav {
    	height: 150px;
    	background-color: #CFC;
    }
    #wrapper {
    	height: auto;
    	width: 1200px;
    	background-color: #99F;
    }
    
    #wrapper:after{
    	display:block;
    	content:" ";
    	clear:both;
    }
    #sidebar {
    	width: 250px;
    	background-color: #600;
    	float: left;
    	margin-left: 35px;
    	color:white;
    }
    #top {
    	height: 150px;
    	background-color: #69C;
    }
    #body {
    	background-color: #CC9;
    	height: 100%;
    }
    #bottom {
    	height: 100px;
    	width: 100%;
    	background-color: #396;
    }
    #header {
    	height: 160px;
    	width: 880px;
    	float: right;
    	background-color: #960;
    	margin-right: 35px;
    }
    #rightSideDiv {
    	width: 645px;
    	height: 560px;
    	float: right;
    	margin-right: 35px;
    	margin-top: 20px;
    	background-color: #36C;
    	display: table;
    }
    #leftSideDiv {
    	height: 560px;
    	margin-top: 20px;
    	float: right;
    	background-color: #990;
    	width: 215px;
    	margin-right: 18px;
    }
    #otherContent {
    	height: 100%;
    	width: 880px;
    	margin-top: 20px;
    	margin-right: 35px;
    	float: right;
    	background-color: #FFF;
    }
    #div1 {
    	height: 616px;
    	width: 880px;
    	background-color: #C60;
    }
    #div2 {
    	height: 283px;
    	width: 880px;
    	margin-top: 20px;
    	background-color: #C90;
    }
    #div3 {
    	height: 283px;
    	width: 880px;
    	margin-top: 20px;
    	background-color: #CC0;
    }
    #div4 {
    	height: 283px;
    	width: 880px;
    	margin-top: 20px;
    	background-color: #CF0;
    }
    #div5 {
    	height: 283px;
    	width: 880px;
    	margin-top: 20px;
    	background-color: #CF9;
    }
    #footer {
    	height: 150px;
    	width: 100%;
    	clear: both;
    	background-color: #999;
    }
    </style>
    </head>
    
    <body>
    <div id="mainWrapper">mainWrapper
      <div id="mainNav">mainNav</div>
      <div id="wrapper">
    
        <div id="sidebar">sidebar<br />
    
          <div id="top">top</div>
          <div id="body">body</div>
          <div id="bottom">bottom</div>
        </div>
    wrapper <br />
    Lorem Ipsum tempor repudiare conceptam facilisi sagittis mentitum class
    hac hinc neglegentur senectus nulla adolescens modo gloriatur tollit 
    malis! Tamuam; Mei moderatius; Habeo repudiandae pertinax ornatus probo
    prodesset non. Qui taciti cetero consectetuer soluta reformidans eam 
    sententiae feugait, delicata splendide princp nec suas eripuit alterum
    purus mod eu consetetur? Duis ceteros elementum quo dapibus, solet 
    novum menandri splendide donec viverra atomorum mei di**** maluisset 
    facer *** dignissim adi. Piscing, inani illum mod ancillae iusto laudem
    ius vis. Aperiam; Quisque risus perpetua ei abhorreant adversarium? 
    Constituto putant mel, platonem mundi postea. Morbi? Democritum utamur
    donec volutpat hendrerit; Dicit purus? Ctas risus.    
        <div id="header">header</div>
        <div id="rightSideDiv">rightSideDiv</div>
        <div id="leftSideDiv">leftSiteDiv</div>
        
        <div id="otherContent">
          <div id="div1">div1</div>
          <div id="div2">div2</div>
          <div id="div3">div3</div>
          <div id="div4">div4</div>
          <div id="div5">div5</div>
        </div>
        
      </div>
      <div id="footer">footer</div>
    </div>
    </body>
    </html>
    Clipboard01.png

  3. #3
    Join Date
    May 2012
    Posts
    17
    Thanks for your reply mavigozler.

    I'm sorry I made it a little confusing. In fact, I put more information than I needed to. Before I show you the code and specify where I'm having the problem, let me answer your two questions:

    1. I'm using XHTML for absolutely no particular reason. When I got into HTML, I started with XHTML for whatever reason and it just stuck. I honestly don't know the advantages/disadvantages of using one type over the other. Maybe you can help in this regard? I just kept using XHTML because it wasn't giving me any problems lol.

    2. The reason I use this specific naming convention is to simply make it more organized for myself. This way everything is categorized and easier to find (for me). When looking through the CSS, I can easily find whatever I'm looking for by first looking at the parent div, for example, and then narrowing it down from there. It just works better for me, that's really all why I do that.

    I'm sorry for giving you too much information. What I'm actually trying to do is very simple to explain. My entire layout is working fairly well except for the "sidebar" div. Basically, this div should expand to fill the empty vertical space underneath it. But that's not all - this expansion should also happen dynamically. Meaning, if I add more content to the "wrapper" div, the sidebar div should just keep expanding. There is also one other important thing I want to mention. If you notice, the sidebar div has three divs within it: top, body and bottom. The one I'm concerned with is the body div. Basically that is where all the content will go and that div is the one that will expand and when it expands due to the content, the entire sidebar div, including the wrapper div should expand. In summary, the wrapper div and the whole sidebar div should expand vertically and should do this simultaneously. If either of them gets filled up with content and if I add more content, both div's height should be effected and not just the one I'm adding the content to.

    Having said that, you can see how the layout looks at the link below. I'm surprised I didn't think of doing this on jsfiddle the first time.

    http://jsfiddle.net/gkA3p/

    Thanks!

  4. #4
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    1. Because XHTML requires closing tags on elements, it gives people what they want or expect because it must be validated to be rendered, and it is true that a lot of people making markup that is HTML transitional or loose have problems because the browser does what it can with invalid markup. Problem with XHTML is that for guys who write markup in text editors, I like not having to close list items or certain table elements, which can muddy up the ability to perceive text (PCDATA) content. Whatever makes you happy. In the end, I always validate.

    As far as your problem, I already looked at your layout, and I tried to put in some Lorem ipsum text. You didn't mention that you saw my attached image.

    Your Sidebar (I colored the text white in my changes) is contained by Wrapper, and Sidebar contains the three divs you mentioned. Where you place text whether before or after a floating div clearly affects its positioning. I am not sure how the Body DIV could resize height-wise when you are placing text (PCDATA) outside of it in a parent DIV like Wrapper. The only way you can connect/relate/tie changes in the dimensions of Wrapper to Body dynamically would be to use Javascript: you would measure the computed style height and width of Wrapper, I imagine, and then fix the height and width of Body to it, I suppose. For those who can't figure out a scripting solution, they might insert rectangular images made in a paint program with a height-and-width pixel dimensions to waht they want, and with the same color as the body background color.

    Again, you need to put in text in Wrapper and show what is happening to sidebar and its child elements that you don't want to happen, perhaps even draw it as a paint image to show what you want. I have never seen quite a complicated page with all the DIVs and contained elements as you have composed them. It's certainly different than a 3-column fluid or fixed display or a header/footer block sandwiching nav and content panels.

  5. #5
    Join Date
    May 2012
    Posts
    17
    Thanks again for your reply mavigozler.

    Apologies, but I somehow overlooked the image you attached. You know what, I in fact don't need to bother with the "body" div. I just realized that if I can simply have the sidebar expand (to cover the vertical space below it.) while the wrapper expands, then that will serve the purpose. So instead of focusing the energy on the body div, we can focus it on the sidebar. Do you think that's more easily doable using HTML and CSS alone?

    Would there be a way of making the entire sidebar div's height fill the vertical space underneath it?

    Let me know if that's not clear.

    Thanks

  6. #6
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    I suspected that your solution was to be found in using the CSS position property since, combined with the top/right/bottom/left properties, it is a major layout determinant particularly for fluid layout. Where possible you want to avoid the absolute determination of container/box dimensions, which means not specifying dimensions with absolute distances (px, em, en, cm, etc). You want percentages if you can. Sometimes that is unavoidable especially if your content is a lot of images which, when re-sized, makes the image look like crap.

    Anyway, you have containers within containers within containers, and you want them the 3rd level to perhaps to have its top and bottom change with the parent container top and bottom, the contained glued to the containing. There is a way to do that with position.

    After looking at tens and tens of pages (often using StumbleUpon with the keyword search 'CSS') but knowing I was looking for examples of the advanced use of the position property, I was struck to think more deeply when I read this page and in the section called Using Absolutely Positioned Elements Inside Relatively Positioned Containers (it's about two-thirds down).

    I made changes to your JSFIDDLE content to demonstrate. Note that I moved the Sidebar div to another location, but it may not matter, just so long as it is contained inside Wrapper.

    http://jsfiddle.net/gkA3p/2/

    The use of CSS position property is one of the box model's big mysteries to me, although I understand its importance. What I really don't understand is that the CONTAINING (parent) block element must be POSITIONed as RELATIVE while the CONTAINED (child) block elements must be POSITIONed as ABSOLUTE, and then you use TOP, BOTTOM, and LEFT and RIGHT as the distance of the edges of the contained block from the containing block (in effect, these are "margin"s). That fixes Sidebar with respect to Wrapper. But now you want to adjust the child box element Top, Body, and Bottom inside Sidebar. Well, in this case, I specified them as percentages of the height of Sidebar: I said Top and Bottom are 10% and Body is 80%. If you leave those height percentages out, they fill up according to what they are containing (in text/image/whatever) content.

    Depending on your content, you should strive for fluid layout...meaning block elements are re-sized as much as possible when the user re-sizes the window. Of course you will want to avoid too much width (long lines of text) and too little width, so specifying min- and max-width might be useful.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles