16 replies [Last post]
naoise
Offline
newbie
Barcelona
Last seen: 15 years 42 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2006-04-11
Posts: 7
Points: 0

I've been having problems trying to build a block to substitute a table.

This is the desired structure (how it looked as a table):

After migrating to CSS, what I managed to do is:

HTML:

<div id="contenido2">

	<div class="top">
	</div>

	<div class="middle">

		<div class="middle_left">
			<div class="noticia"> 
			</div>
		</div>

		<div class="middle_right">
			<div id="newsletter">
			</div>
		</div>

	</div>

	<div class="bottom">
	</div>

</div>

CSS 1:

#contenido2 {
	width: 700px;
	margin: 5px auto 0 auto;
}

#contenido2 .top {
	display: block;
	height: 9px;
	background-image: url(...png);
	background-repeat: no-repeat;
}
#contenido2 .middle {
	display: block;
	background-image: url(...png);
	background-repeat: repeat-y:
}
#contenido2 .middle_left {
	width: 495px;
	margin: 0 0 0 2px;
	display: compact;
}
#contenido2 .middle_right {
	width: 195px;
	margin: 0 0 0 2px;
	display: compact;
}
#contenido2 .bottom {
	display: block;
	height: 27px;
	background-image: url(...png);
	background-repeat: no-repeat;
}

So the right column wasn't really RIGHT :? (bad joke)

Then with float properties:

CSS 2:

#contenido2 {
	width: 700px;
	margin: 5px auto 0 auto;
}

#contenido2 .top {
	display: block;
	height: 9px;
	background-image: url(...png);
	background-repeat: no-repeat;
}
#contenido2 .middle {
	display: block;
	background-image: url(...png);
	background-repeat: repeat-y:
}
#contenido2 .middle_left {
	width: 495px;
	margin: 0 0 0 2px;
	display: compact;
[b]	float: left;[/b]
}
#contenido2 .middle_right {
	width: 195px;
	margin: 0 0 0 2px;
	display: compact;
[b]	float: right;[/b]
}
#contenido2 .bottom {
	display: block;
	height: 27px;
	background-image: url(...png);
	background-repeat: no-repeat;
}

Making the columns float makes the footer hung under the middle DIV....

I've tried everything that I know, but I can't get the desired structure. I bet it's a rather easy subject, but haven't found the solution yet...

to see what I meen the web is at http://www.goldensantos.com/grit/

Thanks a lot!

Smile

larmyia
Offline
Elder
London
Last seen: 13 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Please help! migrating from &lt;table&gt; to &lt;div&gt;

If I'm reading your post correctly I'd say that you're not clearing your floats. Floats are very useful but can be tricky if you don't know how to use them. I think you might be better off reading up more on them than us giving you a quick solution (I don't think you'll really learn that way). then we can again look at your problem and offer some pointers.

I know when I was starting out I found this to be really useful

http://www.complexspiral.com/publications/containing-floats/

hth

larmyia

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Please help! migrating from &lt;table&gt; to &lt;div&gt;

larmyia wrote:
If I'm reading your post correctly I'd say that you're not clearing your floats.

Definitely Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

naoise
Offline
newbie
Barcelona
Last seen: 15 years 42 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2006-04-11
Posts: 7
Points: 0

Please help! migrating from &lt;table&gt; to &lt;div&gt;

larmyia wrote:
If I'm reading your post correctly I'd say that you're not clearing your floats.

What does that exacly mean?

Thankyou people

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Please help! migrating from &lt;table&gt; to &lt;div&gt;

It means exactly what it says - you're not clearing your floats Laughing out loud

http://www.positioniseverything.net/easyclearing.html

It's quite a bit of reading, but explains exactly what the problem is.

Verschwindende wrote:
  • CSS doesn't make pies

naoise
Offline
newbie
Barcelona
Last seen: 15 years 42 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2006-04-11
Posts: 7
Points: 0

Please help! migrating from &lt;table&gt; to &lt;div&gt;

cheers, I'll give it a read. both links

Il Factotum
Offline
Regular
Last seen: 13 years 28 weeks ago
Joined: 2006-04-12
Posts: 14
Points: 0

Please help! migrating from &lt;table&gt; to &lt;div&gt;

I'm having a problem with completing that article. :oops:
I tried out the example for myself, and here's what I get:

http://www.antiquesofthefuture.net/float.html

I'm assuming that I just made a dumb mistake. Any clue what it is?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Please help! migrating from &lt;table&gt; to &lt;div&gt;

Il Factotum wrote:


I'm assuming that I just made a dumb mistake. Any clue what it is?


Yes! [-X hijacking someone elses thread. Smile

You need to clear the parent container, adding an element before the parent closes at the bottom is one method but adds needless markup, if you wanted the hr element to work then remove the negative margin and set 'clear:both'.

Without markup you can add 'overflow:hidden' to the parent or use the 'clearfix' (as devised by this forums owner and administrator) technique mentioned in the P.I.E easy clearing article.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

naoise
Offline
newbie
Barcelona
Last seen: 15 years 42 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2006-04-11
Posts: 7
Points: 0

Please help! migrating from &lt;table&gt; to &lt;div&gt;

larmyia wrote:
If I'm reading your post correctly I'd say that you're not clearing your floats.

That it was in deed. Obscure are the ways of css...
Thanks to all

www.tomasmateustudio.com
www.goldensantos.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Please help! migrating from &lt;table&gt; to &lt;div&gt;

Any time, glad you got it sorted Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

naoise
Offline
newbie
Barcelona
Last seen: 15 years 42 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2006-04-11
Posts: 7
Points: 0

Please help! migrating from &lt;table&gt; to &lt;div&gt;

Hugo wrote:


Yes! [-X hijacking someone elses thread. Smile

Whats the hijacking thing?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Please help! migrating from &lt;table&gt; to &lt;div&gt;

naoise wrote:
Hugo wrote:


Yes! [-X hijacking someone elses thread. Smile

Whats the hijacking thing?

Look at the original quote it was not in reference to yourself.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Please help! migrating from &lt;table&gt; to &lt;div&gt;

Not you, that was directed at Il Factotum Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Please help! migrating from &lt;table&gt; to &lt;div&gt;

Yes thank you TPH ; posting fast and furious today aren't we Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

naoise
Offline
newbie
Barcelona
Last seen: 15 years 42 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2006-04-11
Posts: 7
Points: 0

Please help! migrating from &lt;table&gt; to &lt;div&gt;

don't see where the problem is with a newbie posting about a similar problem?

:?

you gurus.... Cool

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Please help! migrating from &lt;table&gt; to &lt;div&gt;

naoise wrote:
don't see where the problem is with a newbie posting about a similar problem?

:?

you gurus.... Cool


It's confusing, and considered slightly rude, but more importantly it's a recipe for confusion having to reply to multiple questions within one thread even if they are closely related. It is generally considered a bad thing to do.

God knows why I'm justifying the remark though:
http://www.csscreator.com/css-forum/ftopic6045.html

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

naoise
Offline
newbie
Barcelona
Last seen: 15 years 42 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2006-04-11
Posts: 7
Points: 0

Please help! migrating from &lt;table&gt; to &lt;div&gt;

got it. see yee around, and thanks again! Laughing out loud