/    Sign up×
Community /Pin to ProfileBookmark

Forcing DIV dimensions

Copy linkTweet thisAlerts:
Feb 21.2005

I have a div “box” that I would like to always be 100 by 100

I have tried <div style=”border:solid 1px black; width:100px; height:100px; overflow:auto;”>

That works in IE but not FireFox. In FireFox if the content is smaller then the box gets smaller also.

I need to use <div> so I can get scrolling in the event of overflow.

Is there a solution for this?

to post a comment
HTML

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@PeOfEoFeb 21.2005 — firefox supports min-height and min-width. Ie does not but you can stretch ff with those.
Copy linkTweet thisAlerts:
@Beach_BumauthorFeb 21.2005 — [i]Originally posted by PeOfEo [/i]

[B]firefox supports min-height and min-width. Ie does not but you can stretch ff with those. [/B][/QUOTE] Does not work with my FF 1.0. I assume you mean a style parm.
Copy linkTweet thisAlerts:
@Beach_BumauthorFeb 21.2005 — Interesting . . . it conflicted with another style . . . display:inline

When I took that out, then height worked in FF.

So how do I do both? Line up <div> and make the dimensions.

Here is what I am trying to make work:

.box { border: solid black 1px; width: 125px; display: inline; height: 100px; overflow: auto; }

I did not post the whole thing earlier because I did not anticipate the interaction of the pieces.
Copy linkTweet thisAlerts:
@Beach_BumauthorFeb 22.2005 — So maybe you just cannot do this in FireFox. Looks like I am developing an IE only page ?
Copy linkTweet thisAlerts:
@Beach_BumauthorFeb 22.2005 — I think I have it. Use tables for the general format, then put a <div> with scrolling inside each table cell.
Copy linkTweet thisAlerts:
@NogDogFeb 22.2005 — [i]Originally posted by Beach Bum [/i]

[B]I think I have it. Use tables for the general format, then put a <div> with scrolling inside each table cell. [/B][/QUOTE]
Arrgghh! Don't use tables for layout purposes!

There are a number of ways to "line up a div" in CSS. Without knowing precisely what you want to do, it's hard to suggest a method. You can use margins, float, absolute or relative positioning, etc. to get a div (or any other box element) where you want it.
Copy linkTweet thisAlerts:
@NogDogFeb 22.2005 — PS: here's a sample of a 3 x 3 grid of divs:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang='en'&gt;
&lt;head&gt;
&lt;meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'&gt;
&lt;title&gt;Untitled&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
div {
float: left;
width: 200px;
height: 200px;
overflow: auto;
border: 1px red solid;
margin: 0 5px 10px 5px;
padding: 10px;
}
div.right {
float: none;
clear: right;
}
div.left {
clear: left;
margin-left: 0;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Lorem Ipsum&lt;/h1&gt;
&lt;div class=left&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt;
&lt;/div&gt;
&lt;div class=right&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt;
&lt;/div&gt;
&lt;div class=left&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt;
&lt;/div&gt;
&lt;div class=right&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt;
&lt;/div&gt;
&lt;div class=left&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt;
&lt;/div&gt;
&lt;div class=right&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@PeOfEoFeb 23.2005 — [i]Originally posted by NogDog [/i]

[B]PS: here's a sample of a 3 x 3 grid of divs:

[/B][/QUOTE] [COLOR=deeppink]what beach bum was looking for a was a div that would have a scrolling overflow but when the content is smaller than the div it will not resize.



I had a dandy little hack for min-height but firefox fixed a bug that keeps it from working now. Basically I just used a % so it would resize for the noncompliant browser and had a div that would stretch the content to a min height and then I used min hight and hight for firefox via owen's hack (you can see what owen's hack is in the hack chart in my sig)... but my dandy system will no longer work





What I am thinking just give the div a height and then a minimum height... I would expect it to conflict with display:inline; because the min-height is really geared for the height of a block level element. Why do you need this div to be inline?[/COLOR]
Copy linkTweet thisAlerts:
@Beach_BumauthorFeb 25.2005 — [i]Originally posted by PeOfEo [/i]Why do you need this div to be inline?[/COLOR] [/B][/QUOTE] I am making a calendar type grid. So I need the <div> to line up several in a row. Then start a new row, etc.

I think that putting <div> inside table cells is my only cross-browser answer.
Copy linkTweet thisAlerts:
@mikepurvisFeb 26.2005 — If you're making a calendar, depending on your level of w3c fanboy-ism, you could concievably use a table, since it's basically tabular data, that is, days and weeks.

The more 'semantic' approach would be us a giant <ol> (ordered list) and then have 31 <li> (list items) that each represent a day of the month. You can just float them all Left and they'll turn into your calender. You'd just have to have a special class selector on Day 1 that gives it the right left-margin to line up with the right day of the week to start.

Meh, w/e.
×

Success!

Help @Beach_Bum spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...