CSS - Divs Of Varying Size And Fixed Size

Something for the css pros:

Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup?

http://www.twosailors.net/test.html

In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either.

Any ideas?
Andreas Pardeike

The Example

I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div.

How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content.

Hi,

I'm trying to build a modal box tool. Yes I know downloadable solutions exist, but wisely or not I'm building from scratch. And the javascript is fine, but on the CSS I feel I'm not quite doing it right.

The HTML structure is pretty straightforward:
PHP Code:
<div id="PopUpBox" class="SinglePopUpBox" style="display:none">
  <div class="TopBar">
    <div class="CloseX"><a href="javascript:closePopUp()"><img src="Images/WindowCloseX.PNG" /></a></div>
    <div id="PopUpBoxTitle" class="Title"></div>
  </div>
  <div id="PopUpContainer" class="Container"><b style="color:#FFFF00">...Connectiing...</b></div>
</div> 




and I just stick that on any underlying page with a button to make it appear. Ajax connects and injects the chosen content into PopUpContainer.

Here's the issue. PopUpBox I want to be a percentage of the screen, to work on any size window. It appears in the middle via percentages. TopBar within that is a fixed height. And then PopUpContainer should fill the rest of the PopUpBox.

So I set height=100% on PopUpContainer. But then it overflows the box by exactly the height of TopBar. At first I thought "hey, this sounds like a job for clearfloat" but that doesn't work. And it shouldn't, because floats aren't the issue. The problem I believe is going to 100% of a variable size. % of (% - x) to be more precise.

So I "fix" this by giving PopUpBox enough padding-bottom to match the size of TopBar. This immediately feels bad, and I don't even know why. But it looks good, so I was prepared to shut up and accept it.

However, IE7 (and probably 6, if I wanted to try it) don't play along. (Ditto IE8 in compatability mode, naturally.) They don't seem to respect that height=100% at all, and will make the Container shrink or bust out depending on what's inside.

So what's the right approach to doing this? I'm quite willing to make moderate changes to my approach, but less happy to do stuff like add 12 pages of javascript to resize the box.

CSS:
PHP Code:
 div.SinglePopUpBox {
    color: #FFFFFF;
    border: 1px solid #CCCCCC;
    background-color: #000000;
    position:fixed;
    z-index: 100;
    left: 15%;
    top: 15%;
    right: 15%;
    bottom: 15%;
    padding:0px;
    padding-bottom:31px; /* Made to match height of TopBar + Container margin + Container Border + this border */
}
div.SinglePopUpBox div.TopBar {
    background-color:#000000;
    background-image: url(Images/TopBar-Black.PNG);
    width:100%; 
    height:26px;
    vertical-align:bottom;
}
div.SinglePopUpBox div.TopBar div.CloseX {
    float:right;
    margin-right:5px;
}
div.SinglePopUpBox div.TopBar div.Title {
    font-weight:bold; 
    font-size:14px; 
    padding-top:5px; 
    padding-left:10px
}
div.SinglePopUpBox div.Container {
    background-image: url(Images/BackgroundBlue.JPG);
    overflow:auto;
    height:100%;
    padding-left:20px;
    padding-right:20px;
    margin-left:3px;
    margin-right:3px;
    border: 1px solid #CCCCCC;
} 

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

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 am new to adsense. I was wondering if I should specify the size of each ad in css (via the div I have around each ad). Or is this unnecessary? (I am not asking if I can change the designated size of the ads in css, but just if I should put in the width and height of the standard ad sizes I have chosen). Any insight would be greatly appreciated. Thanks.

I'm not a programmer by nature, but am picking things up as I go along. I'm working on some forms to make my job easier. Hopefully what I will provide below is enough info to provide a solution. If not, let me know what else you might need.

I understand that this section of CSS manipulates the size and other attributes of the textarea input box:


fieldset div input,fieldset div textarea {
width:150px;
border-top:1px solid #555;
border-left:1px solid #555;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
padding:1px;color:#333;
}

What I am looking for is what do I need to add to my CSS and consequent HTML markup to have other textarea input boxes with different attributes? What I really need is to have 4 small boxes within the same div on the same row.

Thanks in advance!!

Hi,

Im trying to code a small portfolio page but im having trouble with the sizing of one of the sections.

Here is my page:
http://www.zombiemod.com/blog/?cat=1#all

Here is my code for the div:
Code:

#container div { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; }

How do I make the Div display this size correctly?

Hi,

For some reasons, my CSS linked file is not taking any more rules. Is there a maximal number of rules per CSS file?
Thanks

hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like: Code:

body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969; 
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }

a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }

form { margin: 0px; padding: 0px; }

any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller


here is a preview with that css file in use : http://www.dbznetwork.net/

Hello,

I have something has follows:

<div>
...
<table>
...
</table>

</div>

My document font size is 1em.

My div font size is 1.4em.

What should be the font-size in my table to get back to the 1em of the document?

Thanks,
Miguel

Hello.

I was wondering how I would go about doing this.

I have a div, the left and right side of it is an image that I want the size to be able to be fluctuated, say, if the div goes larger than say 50 px, then it will start repeating and get larger. I have tried to start this already, but I havent had any luck. I also am not having any luck on getting the backgroun image to show. Anyone here know how I would make it to where my left or right side (border-right, border-left) will automatically resize if it is needed to go larger or get my background image to show? It's for a news conent box for my website I am coding, and I need it to go larger than just a set value. Thanks for your help.

P.S. this is what I have so far
Code:

<div style="width:460; height: auto; border-right: url("images/border_right.gif"); border-left: url("images/border_left.gif"); background-image: url("images/content_content.gif"); background-repeat: repeat;">
News content will go here
</div>

New to CSS, but I'm looking for the following:

I would like to create this matrix, with say 3/3 fields. Each of these fields will have an image of a particular size. The size for all 9 fields are identical. So something like:

*******************************
* * * *
* Image 1 * Image 2 * Image 3 *
* * * *
*******************************
* * * *
* Image 4 * Image 5 * Image 6 *
* * * *
*******************************
* * * *
* Image 7 * Image 8 * Image 9 *
* * * *
*******************************

I defined the matrix using div with the code:

.matrixX10 {
margin-top: 10%;
position: absolute;
}

.matrixX20 {
margin-top: 20%;
position: absolute;
}

.matrixX30 {
margin-top: 30%;
position: absolute;
}
.matrixY10 {
margin-left: 10%;
position: absolute;
}

.matrixY20 {
margin-left: 20%;
position: absolute;
}

.matrixY30 {
margin-left: 30%;
position: absolute;
}

I defined each field as in eg:
<div class="matrixX10 matrixY10">image 1</div>

That actually works, but I would like to define the size of these images. Defining the size of the div does do anything (do I overlook something) and I do not like to, well define all images individually. Do I need to add another class, or am I writing a really messy code?

We have > 400 products in our children's boutique in Infant Girl as an example. Right now, you click 1-20, 21-41, etc. to view them by 20. I'd like to give people a way to view all, but here's my problem.

I use a horizontal looper asp program to show 3 colms and products and how ever many rows required to show 20. Behind this I use a white CSS box that looks like this.

<span class="detailsboxlist"></span>

There's nothing in it. I use layers to push it behind the products.

How can I now make it dynamically scale to the view all (400+ products) which change all of the time?

Thanks!!!

Mike