Jump to content

Fluid layouts


Recommended Posts

Hi Everyone,

I am currently trying to build a responsive/fluid website. The problem I have is that the content within the container div drops out of the bottom

of the div as I shrink the browser window. Is there any way to code your font size to allow it to resize, as the browser resizes.

The layout of the site is done in %, apart from the height of the container div, which is set to pixels. Everything is reshaping nicely, as I

shrink the browser, apart from the actual text which is falling out of the bottom of the container div.

The point of the site is to be responsive, and work nicely across different devices/screen resolutions, but just need some help in solving this problem.



Link to comment
Share on other sites

Is there any way to code your font size to allow it to resize, as the browser resizes.

I don't think so, short of using Javascript somehow to do that.


However, your text should stay inside the container and wrap automatically as the container divs change width, unless you have a long string of text with no spaces. Perhaps there is a different problem that you are running into? If you can post the html/css (or just provide a link to the files) we can take a look.


EDIT: I just thought of something. Why are you specifying the height of the container div? That will cause issues -- your text needs somewhere to go if the browser shrinks and the line-width changes. That's probably the issue you are experiencing, and you need to find a way to avoid coding this layout with a fixed height. Again, if you post your code, that is something we may be able to help with.

Link to comment
Share on other sites

  • 2 weeks later...

Thanks for your responses, and sorry for the late reply, the solution I came up with in trying to build a responsive site, was to make the layout fixed, but use media queries to target tablets and smartphones etc, and change things with those. The problem I had in making the whole site fluid was I was using a fixed gradient background for the main content created in Gimpshop, from what I've learned to build a responsive fluid site, the background for the container would need to be more flexible, then you could proportion everything in your site to resize, then target your major layout changes with media queries.

A slightly unrelated question I have is, is it ok to specify the height of your container/main content div when designing your page, I was told by a friend that this isn't how you generally go about it. However I like to do as I can see from the outset what I am working with, it works in the browser ok, and I can always adjust it later if I need to.

Also are there are any tutorials on designing seperate mobile specific websites?

Link to comment
Share on other sites

Yes it is ok. You can use min-width, max-width, min-height and max-height to control the size. Also you might want to use overflow: auto as well which adds a scroll bar if the content is larger than the container its in. So the scroll bar doesn't show up in the main div you will want to set the overflow: hidden on the main div and overflow: auto on your fixed background so the scroll bar shows up on the right side of the screen rather than in your main div.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...