9 replies [Last post]
3Pinter
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-09-26
Posts: 4
Points: 0

Hi,

Eventhough this is my first post here at csscreator.com, it's probably going to be a difficult one, hopely easy for you guys/girls.

What I have a layout which has a [div id="content"] containing a menu to the left [div left] and the text to the right [div right]. Still with me? I continue. underneath [div id="content"] should always stick the [div id="footer"], no matter if [div left] or [div right] has the most content.

At first I used position:absolute on the div left which works as long as [div right] has more content then [div left]. Otherwise [div footer] sticks underneath [div right] (read: [div content]'s height isn't affected by [div left] but by [div right].

So second option: [div left] using float:left. This goes well, no problems here ofcourse.

HOWEVER:
[div right] has a nested [div article_box] which has a float:left div nested followed with some p-text. After this [div article_box] a [p] has the CSS:clear:both. Why? to set the [p] on a new line incase the height of float:left is bigger then the nested text.

But clear:both also clears the float:left of [div left]!! And it shouldn't actually....


H1 text
  • Bunch of
  • listed items

CSS:

#container-unit{height:100%; margin:0 auto; width:920px; position:relative;}
#container {background: url(images/main/bg.gif) repeat-y left top; width:800px; position:relative;}
#content{position:relative; background-color:#003366;}
#header_primary {background: #FFECEC url(images/main/header_bg_h1.jpg) no-repeat left bottom; height:209px; padding-top:16px;}
#header_primary span{display:none;}
#menu{background: url(images/main/header_bg_menu.jpg) no-repeat center top; height:30px;}
#menu_alg{margin-right:120px; position:absolute; top:10px; right:0; text-align:right;}
#banner_pos1{position:absolute; right:0; top:292px; width:120px;}
#footer{clear:both; padding:0 30px; background: url(images/main/bg_ef.jpg) no-repeat center bottom; height:100px; position:relative;}
#left{position:relative; float:left; margin-left:24px; width:220px;}
#right{position:relative; margin-left:244px; margin-right:30px; padding-bottom:20px; line-height:150%;}
#right .pic_left{float:left; padding: 5px; text-decoration:underline;}
#right .date{clear:both;}
[/code]

I'm really stuck...how can I solve this?

Thanks.

3Pinter

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 33 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

from what i under stand it

from what i under stand it sounds like faux columns.
but then again you kind lost me.
do you have a link?

all ┬╗ http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 13 years 23 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

Hmm... maybe you shouldn't

Hmm... maybe you shouldn't use position:relative; style but float alone would be enough.
And about the clearer, you are using it inside

element, and i think it should be used as some blank

AFTER the tag closing
not inside this div.

I'm not sure though Wink just have bunch of ideas.

Crea
Crea's picture
Offline
Enthusiast
Hamburg - Germany
Last seen: 9 years 44 weeks ago
Hamburg - Germany
Timezone: GMT+2
Joined: 2007-02-08
Posts: 131
Points: 8

a very short answer: please

a very short answer:

please post a link.
If this shouldn┬┤t be possible please check widths
and a correct allocation of styles.

A perfection of means, and confusion of aims, seems to be our main problem.
Albert Einstein

http://www.creategg.de

hethinksitsreal
Offline
Regular
Last seen: 12 years 15 weeks ago
Joined: 2007-04-05
Posts: 25
Points: 0

Can you please clarify what you're after?

Your description is a little hard to follow. I've posted your page with your CSS attached. Could you describe what you want your page to look like based on what we can see there. It's difficult to help if we don't know what you want without a picture. I've only replaced your links to your images with #ccc background color so we can see the divs.

URL: http://www.iebwebdesign.com/forum.htm

3Pinter
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-09-26
Posts: 4
Points: 0

Okay, creating an example is

Okay, creating an example is probably the most easy thing to do right now: so I did...

http://www.fromthemill.nl/layouttest/

and styling.css

Stripped as much as possible to get rid of unneeded styling.

Hope it helps...

tnq
3Pinter

sticks464
Offline
Enthusiast
Topeka, KS.
Last seen: 9 years 14 weeks ago
Topeka, KS.
Timezone: GMT-6
Joined: 2006-10-18
Posts: 116
Points: 71

I took a generic layout I

I took a generic layout I use and modified it for what I think you want.

Untitled Document

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc arcu. Pellentesque risus. Phasellus pharetra turpis ut orci. Vivamus pellentesque, nunc sed volutpat aliquam, velit nunc posuere odio, at commodo arcu ante vel diam. Donec vitae lectus. Proin nunc. Vivamus id velit. Suspendisse posuere porta quam. Integer egestas, diam in aliquam cursus, libero mi sagittis quam, ut vulputate sem urna at purus. Curabitur pharetra lectus sit amet ipsum. Curabitur porttitor magna. Quisque posuere lectus quis sem. Ut quis nunc. Quisque nec lectus. Nam vitae purus in mi vulputate ultrices. Vivamus mauris mi, ornare iaculis, vehicula bibendum, dapibus nec, lectus. Sed eu purus sed ante congue vestibulum. Morbi varius rutrum purus. Curabitur eu lorem et tellus tincidunt porta. Quisque urna. Nullam nonummy. Suspendisse aliquam nibh ut velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam aliquet dapibus mauris. Vivamus blandit, mauris ac mollis facilisis, nisl lorem lobortis tortor, at nonummy purus risus quis nibh. Pellentesque condimentum tincidunt ipsum.

Article Box This text represents a picture with a certain height and width

Aliquam dui dolor, hendrerit eget, aliquet ac, dapibus id, tortor. Curabitur consequat consequat ante. Aenean pellentesque fringilla sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt orci ac pede. Donec eros lectus, porta sit amet, blandit eu, faucibus ac, nulla. Nulla vestibulum accumsan nunc. Praesent nunc. Curabitur non mi vitae ligula venenatis gravida. Vestibulum ligula odio, euismod non, elementum tincidunt, pellentesque non, felis. Nam condimentum, nisl non tincidunt tempor, erat magna consectetuer neque, vel placerat lorem leo ut lacus. Suspendisse potenti. Sed lacus. Fusce in erat. Integer facilisis posuere sem. Suspendisse nibh.

if TEXT1 isn't as high as the height of image this p-text is set to the left of the image but actually should be set on a new line!!!

Article Box This text represents a picture with a certain height and width

Aliquam dui dolor, hendrerit eget, aliquet ac, dapibus id, tortor. Curabitur consequat consequat ante.

if TEXT1 isn't as high as the height of image this p-text is set to the left of the image but actually should be set on a new line!!!

Banner Here

3Pinter
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-09-26
Posts: 4
Points: 0

sticks464, You've managed

sticks464,

You've managed to simply the coding (less div's) AND
to solve my layout issues!!!!

I've been working for this whole evening to get it working but right now it's a rock steady layout!

Thanks, you've helped me a lot.

However one thing I didn't understand: why the use of display:inline???

3Pinter

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 11 hours 38 min ago
Joined: 2004-06-30
Posts: 9669
Points: 805

Most probably to fix an IE

Verschwindende wrote:
  • CSS doesn't make pies

3Pinter
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-09-26
Posts: 4
Points: 0

arghhh... Stupid IE! "Why

arghhh...

Stupid IE!

"Why can't all good things in life come without downside?"
Like webdesigning without the IE-bugs?

thanks however for pointing out the explanation!

3Pinter