CSS - Problems Making A Design Expand Vertically

Good morning all,

iv been fiddling with css for a couple months now, and iv done a couple pages and i want to do a more advanced style layout


Im running into some float problems, im hoping somone can think of a better way to do this.

heres a picture of what im roughly immaginging my page layout to look like.



The problem i run into is having the 3 nav boxes on the right they seem to mess up any floats in the main window where content would go.

heres a picture of how the problem looks:



Its like i want to clear the floats inside the main content div, but not clear the div floats outside.

Im a bit stumped can anyone help me out,

would be happy to explain more or provide css source.
any suggestions on a better way to do this.

Problem page: http://www.ilumos.co.uk/site/?page=events
Working page: http://www.ilumos.co.uk/site/
Style: http://www.ilumos.co.uk/site/style/styleDefault.css
Hi all,

I'm trying to make the glowyness (inside div#wrap) on the right side of the page extend to the bottom of the viewport/window, even if there isnt enough content (see problem page above) but the trouble is that when I apply height: 100% (with the same in a parent element) IE refuses to scroll the longer pages.

Is there anoter way to make div#wrap fill the window?

Thanks

Hi,

I haven't done any .css in a while so this might be a really dumb question I could have figured out by myself but...

I'm trying to make a 3 column webpage using wordpress . I've colored the three columns blue, yellow, and red. I can get the blue and red to the relative position I want, but the red one is stuck below the two others even though I want all three on the same level. I can't quite figure out what's preventing that red column from positioning itseld higher...

Any thoughts?

look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated.

God, this is really simple but I have forgotten how to get the containing box to expand

Basically the text div expands but the containing div doesn't

PHP Code:
<div style="width: 300px; min-height: 200px; border: 1px dashed red;">

    <div style="border: 0; width: 110px; height: 110px; float: left;">
        <img src="#" width="100" height="80" border="0" align="left" />
    </div>
    <div style="border: 0; width: 190px; min-height: 200px; float: right;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio nibh, interdum eget, mollis quis, imperdiet non, risus. Curabitur laoreet vehicula massa. Curabitur consequat dui vitae lectus. Nam rutrum sapien id quam. Pellentesque aliquet nulla dignissim ante. Fusce metus libero, vehicula hendrerit, condimentum id, malesuada in, elit. Nam fermentum, metus in varius scelerisque, diam purus tristique tortor, vitae suscipit elit ipsum eu dolor. Ut dictum porttitor velit. Pellentesque cursus purus elementum dui. Phasellus aliquet ante vitae pede. 

</div>

</div> 

I have a page that uses CSS to handle layout. I also use a combination of CSS and javascript to create an expandable menu. I have a simplified version of this page he

http://www.stringersites.com/csstest/index.htm

Users of Dreamweaver will recognize this as being based on the HaloNavLeft template.

As you can see, the page displays fine until you start expanding the menu items contained in <div id="mainMenu">. If you expand enough, the mainMenu box extends beyond the borders of the <div id="pagecell1"> in which it's contained.

My primary question to the group is how to get the pagecell div to autoexpand along with the mainMenu div.

My secondary question is how to stretch a vertical column to the height of the containing div. Specifically, this is <div class="relatedLinks">, which is contained in pageNav, which, in turn, is contained in pagecell1.

The relevant pieces of CSS are included below, but you can link to the entire CSS sheet from the test doc above.

Thanks in advance for the help.

-Steve Stringer


Code:

#pagecell1{
 position:absolute;
 top: 112px;
 left: 2%;
 right: 2%;
 width:95.6%;
 background-color: #ffffff;
}
 
#mainMenu {
 background-color: #EEE;
 border: 1px solid #CCC;
 color: #000;
 width: 350px;
 position: absolute;
 margin-left: 10px;
 margin-top: 20px;
}

#pageNav{
 float: left;
 width:178px;
 padding: 0px;
 background-color: #F5f7f7;
 border-right: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
 font: small Verdana,sans-serif;
}

.relatedLinks{
 margin: 0px;
 padding: 0px 0px 10px 10px;
 border-bottom: 1px solid #cccccc;
}

Hi,

Is there any way to set a DIV that starts at 500px height but can grow if the content inside is longer than that? Thanks.

I'm trying to get the footer to dynamically expand with the content in the box 1, 2, 3. How can i do this?

The HTML
Code:

<div id="footer">
    <div id="box1">Content</div>
    <div id="box2">Content</div>
    <div id="box3">Content</div>
</div>

The CSS
Code:

#footer {
 min-height:150px
 height:auto;
}
#box1 {
 float:left; 
 min-height:150px
 height:auto;
}
#box2 {
 float:left; 
 min-height:150px
 height:auto;
}
#box3 {
 float:left; 
 min-height:150px
 height:auto;
}

Hey guys,

I have been working on this for weeks and it is driving me nuts. I am trying to get the wrapper to expand to accomodate the content, but for some reason it wont expand. Any ideas?

Here is the link: h$$p://digitallife.us/tutorials-t.html

Thanks,
Daniel

Hey guys. I've gotten awesome help here before, so I decided to come back.

Here is the web page I am trying to change (note-far from done. Don't laugh too hard): http://metroairvirtual.org/pilot_profile.php?pilot=1645

If you scroll down to "My Career History," you'll notice that (for example, the very first row of the table), it says "Email address updated from," and doesn't continue with the rest of the statement (gets cut off).

I want to make it so I can scroll horizontally to view the whole statement by scrolling. I was successful by using the white-space: nowrap and then overflow-x: scroll. While that allowed me to do what I wanted, the actual DIV doesn't continue with the content, as shown in the shots below.





Do you guys have any idea on how I can make the div style fill the scroll space? I can't really do a fixed width because history content varies from member to member and it is shorter/longer than others.

Thanks for any help you can offer! If you need used code below that's fine, but I assume you can just use FireBug to inspect it.

Thanks again!

So probably my topic title explains my problem pretty clearly, but basically I've got this div and I'd like it to expand downward as I fill a div contained within with content. Can anyone explain how I can do this?

I tried placing a fairly tall picture in my inner div and right now it extends past the bottom of the outer div and looks really weird.

Actually if there was even just a way I could tell the outer div exactly how tall the inner div is, that would also be fine, but I can't find a way to do this. I've tried the height: 253px; tag, but it hasn't changed anything. My outer div still doesn't go as far down the page as the inner one, so I'm left with an image thats halfway sticking out my content box.

Any help would be great, thanks!

I have a div that has a table inside of it. Even though the table expands with content added, the div does not.

It's important to me that the div extend with the table because this div in question has a background shadow border for the table.

Here is the CSS:

Code:

#right {
  float: right;
  width: 80%;
  height: 100%;
}

#rt_brdr {
 height: 100%;
 width: 100%;
 padding-bottom:5px;
 padding-right: 10px;
 margin-bottom: 5px;
 vertical-align: bottom;
 background: url(img/r_brdr.gif) repeat-y right;
}

My HTML:

Code:

<div id="right">
   <div id="rt_brdr">
    <table border="0" align="left" width="100%" style="height: 93%; margin-top: 2px;"  cellpadding="0" cellspacing="0">
       <tr>
         <td class="top" style="background: url(img/w_tl.jpg) no-repeat top left #FFFFFF;"></td>
         <td class="white_fill"></td>
         <td class="top" style="background: url(img/w_tr.jpg) no-repeat top right #FFFFFF;"></td>
       </tr>
       <tr class="white_fill">
         <td></td>
         <td></td>
         <td></td>
       </tr>
       <tr>
         <td class="bottom" style="background: url(img/w_bl.jpg) no-repeat bottom left #FFFFFF;"></td>
         <td class="white_fill"></td>
         <td class="bottom" style="background: url(img/w_br.jpg) no-repeat bottom right #FFFFFF;"></td>
      </tr>
    </table>
  </div>
  </div>

I have attached a screenshot. Note that I took the content out of the table in the post so that the code doesn't extend forever. I have put a black border around the right border to make it stand out in the screenshot.

I have an absolutely position <div> with some content positioned within it. I do not always know the size of the inner content so my problem is getting the outer div to expand to the height of the inner div. Is there a solution for this with absolutely positioned items that wil work in IE/Firefox/Safari?

I'm attaching a simple html file which mimics what i am trying to accomplish and the code is below:

Code:

<div id="detailBlock" style="position: absolute; width: 250px; height: 35px; z-index: 3;  border: 1px solid #000; overflow: visible; background-color: #fff5d9; font-size: 8pt; top: 50px; left: 100px;">
<div id="closeBlock" style="position: absolute; width: 40px; height: 8px; left: 210px; top: 3px; font-size: 7pt;"><a href="javascript: closeDetail();">CLOSE</a></div>
<div id="detailContent" style="position: relative; width: 240px; top: 15px; left: 5px; border: 1px solid #F00;">Content whose size i do not know...So if I write anything substantial in here it will go over the edge</div>

Thanks in advance for your help.

hi...

if you look here - http://www.outlawz.frihost.net/fula/test2.php

you can see i have written to much text...

here is my code

Quote:
<?php require("header.php"); ?>

<div id="content">
<br><br>
<b>Welcome to Kadafi Legacy.</b><br><br>

<img src="image/yaki1.jpg" alt="Yaki Kadafi" align="left">

Here at Kadafi Legacy we aim to bring you the latest and most in depth information on Yaki Kadafi, such information will include the family and friends of Yaki Kadafi, Kadafi's childhood years, the records Kadafi featured upon and all this and much more can be found in our <a href="/history.php" alt="Yaki Kadafi History">Kadafi history</a> section.<br><br>

The latest news and information regarding projects from the official Kadafi site - <a href="http://www.yakikadafi.com" target="_blank" alt="YakiKadafi.com">YakiKadafi.com</a>, will also be reported and updated daily in our <a href="/news.php" alt="Yaki Kadafi News">Kadafi News</a> section.<br><br>

Also available on Kadafi Legacy is the <a href="/music.php" alt="Yaki Kadafi Music">music</a> section, you will find information, images and lyrics about previous releases such as 'Son Rize: Volume 1'.<br><br>

In our <a href="/links.php" alt="Yaki Kadafi Links">links</a> section you will be able to find direct links to official sites that are related to Yaki Kadafi in one way or another also in our links section is a 'support the real' area of links which will link to sites we support, i.e - Sekou Odinga, Assata Shakur.<br><br>

Our ultimate goal is to honour Yaki Kadafi, his family and his music in the correct way, this means there will be no illegal downloads available on this site and nothing will be used without permission from Yaasmyn Fula.<br><br>

Last and not least, Kadafi Legacy would like to thank the following people -<br><br>

Yaasmyn Fula<br>
Cory Caudill<br><br>



content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>

<br>

<div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div>

</body>
</html>


and heres the css -

Quote:
a:link {color:white}
a:visited {color:white}
a:hover {color:black}
a:active {color:white}

body {background-color: #666666}

#head img { display: block; }

#head{

position: relative;
top: 7px;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 12px;
color:white;
background-color: #666666;
background-image: url(wavy.jpg);

}

#box1{

position: relative;
top: 7px;
left: 140px;
width: 345px;
font-family: verdana;
font-size: 12px;
color:white;
background-color: #666666;
background-image: url(wavy.jpg);

}

#content {

position: relative;
top: 7px;
left: 140px;
width: 697px;
height: 500px;
font-family: verdana;
font-size: 12px;
color:white;
text-aligh: justify;
background-color: #666666;
background-image: url(image/back.jpg);
padding: 5px;

}


#foot{

position: relative;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 9px;
text-align: center;
color:white;
background-color: 666666;
background-image: url(wavy.jpg);

}



on the page the text goes out side the blue box.. how do i make it so the when it does that the blue box stretches down... thanks!

also it works in IE but not in FIREFOX!