5 replies [Last post]
earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 12 years 14 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

I'd like my DIV's to work the same way as this table.
http://www.expresiv.com/sample.html

Basically, the top table is 95% and the bottom is a set size. I've tried to set some DIV's like this, but it doens't work.

I set the content DIV to be 95%, but it ends up stretching a lot farther than that.... and it won't let me scroll to see the rest of the content. On top of that, I can't see the bottom bar either.

Any suggestions?

I noticed that they also did it here: webstandardsawards.com

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 16 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Trouble converting Table to DIV

I'm surprised that no-one's come in on this one!

HTML:

<div id="main">
	<p>Feb. 27, 2004 | TOKYO (AP) -- Japanese Internet company Softbank Corp. said Friday blah blah blah...</p>
    <p>&quot;We really don't know how to apologize,&quot; said Softbank president Masayoshi Son at a televised news conference. blah blah blah...</p>
    <p>Japanese police this week arrested four people on suspicion of trying to extort money from Softbank after they had blah blah blah...</p>
    <p>The information on current and former subscribers – totaling 4.51  million in all – included addresses, blah blah blah...</p>
    <p><br /><br /></p>
    <p>Today's Daypass sponsored by NewsStand</p>
    <p>Son will forgo 50 percent of his salary for six months to take responsibility, Softbank said in a statement. Six other senior officials blah blah blah...</p>
    <p>Softbank said it will spend about 4 billion yen ($36.70 million) on gift coupons for all of its customers, among other blah blah blah...</p>
    <p>Softbank shares, which fell nearly 5 percent Tuesday and 6 percent Wednesday after the news blah blah blah...</p>
    <p>Earlier this year, Softbank said information on 242 users of its broadband service had gotten out.</p>
    <p>Softbank has been trying to</p>
</div>

<div id="bottom"> </div>

CSS:

div {
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
	padding: 10px 10px 0 10px;
}

#main {
	width: 400px;
	background-color: #cccccc;
	color: #000;
}

#bottom {
	width: 400px;
	background-color: #666666;
	height: 20px;
}

Is that what you're after? Smile

cheers,

Stuart

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 12 years 14 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

Trouble converting Table to DIV

That worked pretty good! How does that work? I noticed that you left out the "height" setting in the CSS.... I also noticed that you didn't set any coordinates for "top".

Can you explain to me how this is working?

I appreciate the help!

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 16 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Trouble converting Table to DIV

Basically, it's how you see it when you look at the html - two <div> boxes following the normal document flow (as they're block elements, there's effectively a line break before and after the element meaning that the second <div> starts on a new line).

All of the <div> tags are styled so as to remove margins (the gap between elements) and padding (the gap between the content and the border).

The main content <div> (imaginatively labelled here with the id 'main') has a width, background colour and font colour set. The height is not set as the container merely grows/shrinks depending on how much content there is.

There was no need to set the 'top' property as I simply set out to match your table, but generally, you might be better off constructing your pages so that they 'flow' rather than use absolute/relative positioning properties. In other words, if you wish to move the content down the page, would it be to put a heading there? If so, then simply insert another <div> (with an id of, say, 'heading') ABOVE the main content <div>!

With regards to the p rule: that's just to remove any margin/bottom-padding from the <p> tag so that the 'bottom' box aligns correctly underneath the 'main' content.

Hope that all makes sense, and a least helps a little! Smile

cheers,

Stuart

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 12 years 14 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

Trouble converting Table to DIV

I appreciate the clarification. I'm having more problems with my file. Maybe I should have shown you this one first. This one is more complicate, but I need it to work the same way.

I've never used "flow" before. What does that mean?

Here are my files... can you tell me what I'm doing wrong?

HTML CSS

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 12 years 14 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

Trouble converting Table to DIV

Actually, I ended up figuring it out. Thanks....