PDA

View Full Version : how fix css div collapse under other div?



mushu
Sep 25th, 2009, 06:45 PM
I'm going nuts and hope it's an easy fix that I just can't see. My design (corporate intranet, so no access, sorry) has a main content div that holds three divs inside. The three divs are all position:relative and float:left -- this is the redone design to remove the base table-based layout design.

Works fine until the user collapses the right side of the browser window by dragging it left. Then each div (correctly, I suppose) collapses underneath the div to its left. That breaks the layout design; how do I prevent the divs from collapsing under each other? I need them to "flex" their widths when the browser gets bigger/smaller but I want them to stay side-by-side...can't figure this silly thing out.

Help! TIA!

SB65
Sep 25th, 2009, 06:52 PM
Set the widths of the contained divs in percentage rather than pixels/ems.

Scriptet
Sep 25th, 2009, 07:40 PM
Or if you don't want the flex which you'll probably find when you've messed around it you can just add a min-width to the container (of the total width of all 3 columns) to prevent the columns inside them from collapsing

mushu
Sep 25th, 2009, 08:42 PM
Set the widths of the contained divs in percentage rather than pixels/ems.They already are, here's part of the css:


#container {
float:left;
width:100%; /* width of page */
position:relative;
clear:both;
}
.col1, .col2, .col3 {
float:left;
position:relative;
margin-bottom:5px;
padding:0 0 1em 0;
}
.col1 {/*maincontent*/
width:46%;
margin-left:2em; /*was 3%;*/
background-color:transparent;
}
.col3 {/*right content*/
width:25%;
margin-left:3%;
}
.col2 {/*leftmenu*/
width:20%;
min-width:190px;
z-index:10;
}


As far as using min-width, that won't prevent the collumns from collapsing underneath each other when the browser window gets smaller in width. :(

Scriptet
Sep 25th, 2009, 10:23 PM
Hi,

Was this originally there:

.col2 {/*leftmenu*/
width:20%;
min-width:190px;
z-index:10;
}

Would cause a problem eventually when being re-sized.
Also any reason for having 2em left margin rather than 3%

mushu
Sep 25th, 2009, 10:35 PM
.col2 {/*leftmenu*/
width:20%;
min-width:190px;
z-index:10;
}
Would cause a problem eventually when being re-sized.
Also any reason for having 2em left margin rather than 3%The min-width is for the left menu which I can't allow to collapse smaller than that due to being pure css itself and a pain to change. The center and right columns are my problems. It would be easy to just put all three divs in a table and be done with it but that's not the way I want to handle it (plus it breaks NiftyCorners for some reason). The margin is in em's so it will also flex when the user changes the font size on the page (I have a javascript function that does that and saves it in a cookie for future use). In fact, correctly, everything is in em's on the site to allow for perfect sizing without breaking the layout....except for this silly div collapsing issue.

MOAR IDEASES PLZ!!

Scriptet
Sep 25th, 2009, 11:35 PM
Yea but when the browser window becomes to small there will be a point when the 190px will become take up more space than 20% (Infact 190px is 20% of 900px, so any resolution width lower than this, and itll be taking up more space), thus not leaving any room for the other columns (I think this is where your problem is occuring?)

Anyway you could try setting a min-width on the container, say about 900-1000px so that they won't collapse because the container will be forced to stay that wide.

Otherwise, solutions I can think, you'd either have to change the widths of the other 2 columns, or re-arrange the layout a bit if you're prepared to do this.

I mean when the 190px is more than the 20%, what do you want to resize in place of it, the main column the right column or both if possible.

mushu
Sep 26th, 2009, 12:25 AM
Well, my intent was to have the left (menu) column be rather fixed in width, and the center and right columns to be collapsible but only in the horizontal sense...I don't want either center or right columns to drop below the left column at any time no matter how wide (or not) the user makes their browser window.

I have a suspicion that I need to add one or more "encompassing" divs to the layout that surround one or more of these existing divs, then add some funky css like position:static or float:right and margin-left:20% or some other weirdness, but I can't wrap my head around those abstractions on a Friday afternoon...

/sigh

Scriptet
Sep 26th, 2009, 01:30 AM
Well tbh there's no real need to set a width on the content if you just float left left and float right right the content will naturally go in the middle, for example if you have the layout like the following:

CSS:


#container{ }
#left{ float:left; width:20%; min-width:190px; }
#right{ float:right; width:25%; }
#center { }


HTML:


<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>


The columns will never ever drop this way and the left will never go below 190px, and you could add padding/margins wherever you want.

I know the source-ordering could do with a bit of work..but then we need negative margins and all sorts

mushu
Sep 28th, 2009, 06:34 PM
Back again refreshed after a nice weekend. :)

Ok, if I float the left column left and the right column right, and do not float the center column, the right column will *still* drop down under the center column when the user resizes their browser window.

That is what I'm trying to avoid. I don't want any div column to drop below any other. To make this simpler, I want the exact functionality of a [table] with three [td] in the same [tr] since you never see a table column drop below the others when you collapse the browser width. All of the columns just naturally get "thinner" (and taller) to contain their text. And this is what I am trying to achieve here. After all, wasn't the holy grail to be able to replace tables with pure css and get the exact same functionality? :-)

abduraooft
Sep 28th, 2009, 06:36 PM
Ok, if I float the left column left and the right column right, and do not float the center column, the right column will *still* drop down under the center column when the user resizes their browser window.
Could you please post your complete code or a link to your page would be much better.

mushu
Sep 28th, 2009, 07:09 PM
It's an internal intranet site so no access...this is gonna be messy. As well, it is extremely complex, using an asp.net master page plus dynamic code that gets inserted at run-time. If you use this to attempt to reconstruct my issue you may have to add or subtract a couple of things but it should be sufficient to get the idea across. And please, everyone does things differently, there is not just one right way, so if you would try to limit comments to how to solve the problem we'd both be time ahead. :) Here is what I think is the relevant html and css code:

The master page:
<div class="colmask">
<div id="container">
<div id="yabba" class="col2"><!-- leftMenuCol -->
<div runat="server" id="LeftMenuInsert">
<!-- asp code goes here to grab left menu html -->
</div>
</div><!--/yabba -->
<div id="dabba" class="col1"><!-- mainContent center column -->
<!-- asp code goes here to grab center content html -->
</div><!--/dabba -->
<div id="doo" class="col3"><!-- (right) column -->
<!-- asp code goes here to grab right content html -->
</div><!--/doo -->
</div><!--/container -->
</div><!-- /colmask -->


<!-- default page "center" content -->
<div><!--#include virtual="~/HomepageTopics.htm"--></div>
<!-- default page "right" content -->
<div style="line-height:1.2em;margin:8px 0 0 5px;max-height:310px;width:100%;overflow:auto;font-size:0.7em;"><table border="1" cellpadding="1" cellspacing="0" width="92%">
<%
'bunch of asp code here that has nothing to do with css
%>
</table></div>
Now the relevant css:


html{font-size:100.01%} /* force proper IE fontsize but not break Safari on Mac */
body{font:0.95em/1.4em Tahoma,Verdana,Arial,Helvetica,sans-serif; text-align:left; padding-bottom:10px; color:#111; margin:1px; padding:0; background:#fff url(/images/backgrounds/bg_img.jpg) no-repeat top left fixed; width:94%; }
.colmask {
position:relative;
float:left;
width:100%;
overflow:hidden;
}
#container {
float:left;
width:100%;
position:relative;
clear:both;
}
.col1, .col2, .col3 {
float:left;
position:relative;
display:inline;
margin-bottom:5px;
padding:0 0 1em 0;
}
.col1 {/*maincontent*/
width:44%;
margin-left:2em;
background-color:transparent;
}
.col3 {/*right content*/
width:28%;
margin-left:2em;
}
.col2 {/*leftmenu*/
width:20%;
min-width:190px;
z-index:10;
}
The three id's yabba, dabba, doo, have no css styles attached. Let me know if I left out any css or html code and I'll post that part, but I think this about covers the initial problem example.
TIA!

abduraooft
Sep 29th, 2009, 10:28 AM
Here is what I think is the relevant html and css code: Not really!

Please use the "view source" option from your browser tabs and copy-paste that here.

Scriptet
Sep 29th, 2009, 05:04 PM
I was reffering to a layout like this:



<!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" media="screen">
*{
margin:0;
padding:0;
}
#left, #right, #content{ min-height:500px; }
#left{
float:left;
width:20%;
min-width:190px;
background:#FC6;
margin-right:10px;
}
#right{
float:right;
width:25%;
background:#FCC;
margin-left:10px;
}
#content{
background:#CFC;
}
#left, #right p{ padding:10px; }
</style>
</head>

<body>
<div id="container">
<div id="left">
<p>Nam eget leo eget lorem feugiat pulvinar in in arcu. Mauris feugiat aliquet leo, sed feugiat tortor mollis sit amet. Donec dignissim lorem sit amet ante porttitor facilisis. Curabitur risus orci, congue consequat condimentum id, posuere in quam. Praesent vitae odio id lorem tempor facilisis id in velit. Integer elementum, nunc eu gravida viverra, massa enim pulvinar leo, a sodales arcu sem quis mi. Duis in mi et sem tincidunt convallis et sed dui. Suspendisse a nisl sapien. Maecenas volutpat diam eget purus rutrum fringilla. Sed quis gravida nunc. Donec auctor rutrum faucibus. Aliquam sit amet ante eget enim adipiscing pulvinar et eget erat. Nullam ornare ipsum non nulla ultrices venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend dolor in turpis pellentesque suscipit.</p>
</div>
<div id="right">
<p>Duis at justo nulla, quis euismod massa. Ut sed porta nulla. Maecenas et tortor justo. Aenean pellentesque hendrerit enim et sodales. Maecenas non felis sapien, id molestie velit. Proin sodales neque at mauris posuere bibendum. Maecenas velit dui, consequat ac dapibus at, pretium sit amet nulla. Mauris nisl ante, cursus ut adipiscing at, adipiscing quis lectus. In lobortis arcu non quam placerat malesuada. Vivamus iaculis lacinia velit, molestie dictum sapien mattis sit amet. Integer non tortor augue. Sed eget pellentesque diam. Aenean ut iaculis nisl. Nam sagittis urna in purus aliquet consectetur ac non velit. Proin vitae erat id nibh congue iaculis.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum ullamcorper diam nec ullamcorper. In quis erat ut est placerat fringilla sit amet eu leo. Phasellus ut odio lorem, eget posuere purus. Integer fringilla elit id nulla dictum consequat tempor libero viverra. Vivamus quis diam odio. Curabitur quis dolor dui, et molestie mauris. Quisque laoreet ornare tortor eget gravida. Fusce adipiscing aliquet porta. Suspendisse ut venenatis elit. Mauris scelerisque odio vitae felis interdum vel tincidunt nibh dignissim. Pellentesque a posuere eros. Proin vel tincidunt odio. Nulla elementum venenatis purus sed auctor.</p>
</div>
</div>
</body>
</html>



Test it in your browser.
Disadvantages is source-ordering is shi*t as I said, and also if you wanted a physical gap between the columns I can't see how it would be possible, because we don't know how much gap to leave on the left, e.g 20% or 190px..
But some faux column background and the use of padding as i've done with 10px around it can create the effect of a gap anyhow.

A CSS guru would know a better way maybe but I can't think of one atm with your minwidth else width constraint on left column

mushu
Sep 29th, 2009, 09:05 PM
Thanks for the help folks, I appreciate the time you've invested in this. I'm not able to post the entire code, as I said, it is too complex, and even if I did page-source-view it would be huge and the same issue of what to cut out would arise. There is a lot of dynamic stuff happening; I think I isolated the pertinent (since relevant was apparently the wrong word to use) code above. I'm just going to study other sources and use the tried and true hit-and-miss method for testing and eventually stumbling on a working solution. :)