[drodriguez]

So, I have been learning CSS for the past week or so and I think I have made quite a bit of progress. I have created a middle section of my page with a main div and then two columns of divs inside of it. Then inside the divs, so I can position the text, I have more divs. 1 in each the lbody and rbody to be exact.

 <div id="mbody" style="position:relative; width:1000px; height:1050px;">
      <div id="lbody" style="position:absolute; text-align: justify; width:500px; height:1050px;">
      Text
      </div>
      <div id="rbody" style="position:absolute; text-align: justify; width:500px; height:1050px;">
      <img src="someimg.jpg>
      <font style="position:absolute; top:330px;">  <!-- I use this to push the text down below the img. -->
      The
      </font>
      </div>
  </div>

The problem is that in firefox when I view the page I will use ctrl+mouse wheel to zoom out and the text will be pushed outside of the div from the bottom moving from the block to on top of the background image i have. It doesnt do this in IE. The only think I could think of was to fix it to the bottom of the div by taking out top:330px and replacing it with bottom:15px. This kept the text from scrolling down outside the div but then was pushed up behind my image. What I am trying to accomplish is to have the text in the rbody div aligned at the bottom with the text in the left body div. Any ideas as to what I am doing wrong? I have been trying to fix this for the past few days now. The website is www.thezombiesarehere.t15.org The only pages that are somewhat functional is the main page and the Food Supplies page under the 'Are you ready?' link. Thanks for the help in advance.

This post has been edited by BenignDesign: 04 October 2012 - 02:15 AM
Reason for edit:: Added [code][/code] tags

[BenignDesign]

Because of your absolute positioning, removing the top:330px; will always move the content of that division back to top:0px;

The problem you are having a browser-specific, which happens a lot (things work in IE but no others or - more often than not - things work in anything BUT IE).

What have you tried so far - other than removing the top:330px;? Have you tried removing the font styling and adding a line break after the image? Have you tried floating the image? Have you tried using divs within your div to separate the text and the image?

I know you said you are very new at this, so I'm not going to critique your code or tell you that one method of making this work is better than another. I'm just throwing out some ideas for you to play around with.

[drodriguez]

Well, i have tried using divs wrapped around the text instead of styling inside the font tag which didnt work. i havent tried a line break yet ill do that momentarily. i dont think i fully understand how the float works. i tried plugging it in somewhere but i probably wasent using it right. and i have tried using 2 divs to seperate the text and image. imma go try a few more things and ill post any changes.

[drodriguez]

i tried the line break and i also found a float tutorial which explained it a little better. nothing has worked so far. ive tried floating the image above and leaving the text in a div and it was floated around it but it still pushed the text out of the div when i scrolled down. i tried floating it the following way:

<div id="mbody" style="position:relative; width:1000px; height:1050px;">
    <div id="lbody" style="position:absolute; text-align: justify; width:500px; height:1050px;">
      Text
    </div>
    
    <div id="rbody" style="position:absolute; text-align: justify; width:500px; height:1050px;">
        <div style="float:right; height:300px; width:500px;"> 
            <img src="someimg.jpg" height="300" width="500">
        </div>
        
        <div style="position:absolute; top:330px;">
            <font>  
              Text
            </font>
        </div>
    </div>
</div>

this did cause the text to float below the image the way it is suppose to i believe. but it still scrolls off the screen when i zoom out. can you tell me if im writing my code right?

and also i do welcome constructive criticism. All of this is self taught and if there are better ways to do certain things it would be nice to know. thanks again.

This post has been edited by BenignDesign: 04 October 2012 - 06:56 AM
Reason for edit:: Added [code][/code] tags

[drodriguez]

If this is just a bug then is there any way to go around it? for instance is there a way to extend the bottom of the div so far down it extends past the scrolling point and further so that if one was to zoom out the div would look as if it was going down but would actually just showing more of it?

[DarenR]

off topic--- for a second here i thought it was me posting ----since my last name is rodriguez

[BenignDesign]

The most obvious answer would be to increase the height of the div that contains the text div. Another option might be to set the height to auto.

I, too, am self-taught in the ways of web design and development. In my opinion (I know others here will disagree with me), there isn't a best way to do things - only different ways as preferred by different people. I may choose to set my container to adjust the height automatically, you may prefer to have a hard and fast, static height designation. Your way isn't wrong, my way isn't wrong. They both get the job done in the end. Just keep swimming... you'll learn about best practices and hacks as you go.

[DarenR]

BenignDesign, on 04 October 2012 - 10:01 AM, said:

The most obvious answer would be to increase the height of the div that contains the text div. Another option might be to set the height to auto.

I, too, am self-taught in the ways of web design and development. In my opinion (I know others here will disagree with me), there isn't a best way to do things - only different ways as preferred by different people. I may choose to set my container to adjust the height automatically, you may prefer to have a hard and fast, static height designation. Your way isn't wrong, my way isn't wrong. They both get the job done in the end. Just keep swimming... you'll learn about best practices and hacks as you go.

I agree 100%. Some people prefer static web pages where nothing changes in size while others prefer fluid pages where they adjust according to screen size. I liek the fluid but hey who am I to tell you what your site should look like.