CSS - Making A Div Have A Minimal Size Or Expand

Hi there,

I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right.

Code:

<font color='white'><font size='1' face=verdana size=1>

I couldn't find the equivalent of this in CSS

This is my last experiment but it doesn't seem to work either

Code:

fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}

Thanks

I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)?

So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0,


How do you get a simple tag like

body {
font-size:small;
}

to be equal in all browsers?

Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way?

By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it.

It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering.

B

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;
}

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'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;
}

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 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.

I have some tables that contain a lot of columns, so the table goes beyond the users viewport. I would like the body of the page to expand to the table, anyone know of a way to get the body to expand horizontally. Below is some code, I would like the red outline to expand to the black.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body style="border:1px solid red;">
<table style="border:1px solid green;width:2500px;">
<tr>
<td style="">slkfdj</td>
</tr>
</table>

</body>
</html>

Hello,

i'm trying to make a tableless image gallery,

each image is inside <span></span> (i don't know the dimensions of the image, it's resized by server side)

while the div container expands fine,
the span container does not expand to fit the image, and i also don't know how to vertically center it.
i can't use <div> because images can be in the same row.

Code:

body {
	margin:0px
	padding:10px;
	background-color: #ffffff
}

body, div,span {
	font-family: Arial; font-size: 12px; color: #000000
}

a {
	color:#000099
}
a:hover {
	color:#0000ff
}


div.paging {
	padding:10px;
	border:1px solid red;
}

div.paging span {
	padding-left:10px;
	border:1px solid red
}

div.gallery {
	padding:10px;
	border:1px solid red
}

div.gallery span {
	margin:20px;
	border:1px solid green;
}

div.gallery img {
	border:1px solid black
}

this is the result
http://addf.net/tests/m_g/gallery.php

is float the only option? must i float every element on the page? what if it's a module for another not floated website?

i'd rather not use float or a table.

if you could help
thank you

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!

I searched for something I want but I didn't find exactly that, or maibe something is wrong but in IE the page does not look ok.

What I want is to have my page looks identical in IE as in FF or OPERA.

I will explain here how I done the code

PHP Code:
<td rowspan="2" width="600" align="left" height="100%" valign="top" >  
<div class="brand_list_big">      
<div class="box_header" style="background-color:#79B602;">CARS LISTED BY BRANDS</div>      
<div class="box_content" style="width:560px;">          
          <div class="brand_list_header"><span style="float:left;"><strong>Audi</strong></span><span style="float: right;">Total Cars : 2</span></div>
          <div class="car_list">
              <span class="fleft"><a href="#">audi tt</a></span><span class="fright"><img 1><img 2></span><br>
              <span class="fleft"><a href="#">Saturn Sky Roadster</a></span><span class="fright"><img 1><img 2></span><br>
          </div>
          ...
          <div class="brand_list_header"><span style="float:left;"><strong>Alfa-Romeo</strong></span><span style="float: right;">Total Cars : 0</span></div>
          ... 


div.box_header
{
    width: 99,5%;
    margin: 1px 1px 1px 1px;
    padding: 5px 0 5px 0;
    font-weight:bold;
    font-size: 12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

div.box_content
{
    margin: 0 1px 1px 1px;
    padding: 5px 5px 5px 5px;
    height: 100%;
    scrollbar-face-color:#7098DF;
    scrollbar-highlight-color:#7098DF;
    scrollbar-3dlight-color:#FFFFFF;
    scrollbar-darkshadow-color:#FFFFFF;
    scrollbar-shadow-color:#919AA4;
    scrollbar-arrow-color:#FFCC00;
    scrollbar-track-color:#FFFFFF;
}

.brand_list_header
{
    width: 99,5%;
    padding: 2px 0 2px 5px;
    background-color:#E3FEB1;
    border: 1px solid #CCCCCC;
    border-bottom: 0 solid #CCCCCC;
    margin-top: 10px;
    overflow:auto; /* I added this now and in ff and Opera everithing is ok, but not in IE*/
}

.car_list
{
    border: 1px solid #CCCCCC;
    background-color:#FFFFFF;
    clear:both;
    overflow:auto;
}

.fleft
{
    float: left;
    margin: 2px 2px 2px 10px;
    clear:left;
}

.fright
{
    float: right;
}

img.new_img
{
    margin: 2px 10px 0 0 ;
/*the img from my code( <img 1>, <img 2> ) have this class*/
} 






Any Ideea why in IE the divs are not ok ?

First I tried to list the cars from a brand using <li> elements but I didn't know how to align the images ( icons ) at the right side, like are now.

10x in advance, waiting for a response

see ya

Hey all, the test page is here. Notice when you expand the "view more details" in IE8 to the point where it is supposed to push the page down, it doesn't! But it does in FF/Safari.

HTML

CSS

Potentially relevant CSS:

Code:

body {
	margin: 0;
	padding: 0;
	min-height:0;
}
div.container {
	width:100px;
	
}
div.outerBody {
	width:100%;
	min-height:0;
}
div.innerBody {
	width:100%;
	background-image:url("../../images/artist_center/body_bg.jpg");
	background-repeat:repeat-x;
	min-height:0px;
 	height:auto !important;
	
	background-color:#cedce5;
	text-align:center;
	margin: 0;
	position:absolute;
}

div.tabContent {
	width:945px;
	min-height:596px;
	border:solid 1px #cccccc;
	float:left;
	position:relative;
	margin-left:14px;
	padding-bottom:14px;
	margin-bottom:14px;
	
}

I'm using clearfix to make things work in IE7, but clearly there's some kind of other problem going on.

Thanks for any help!

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!