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....
- Bunch of
- listed items

TEXT1
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!!!
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
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?
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
I'm not sure though just have bunch of ideas.
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.
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.
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
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.
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!!!
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
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
Most probably to fix an IE
Most probably to fix an IE bug.
http://www.positioniseverything.net/explorer/doubled-margin.html
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