Jump to content

A few issues with CSS (div's and resolution)

Recommended Posts


I am quite new to CSS, and have learned much the past months, but I still have some things that trouble me and i struggle to find a sollution.
I do work with div tags.



Problem 1: At the right, you can see "New Comics" with an unorderd list consisting of two items at this moment. The date is "float: right". it shows good on my screen, and any other medium to large screen resolution, but once it gets to small, the date gets ON the border line.
I tried: min-width:300px
Result: It jumped UNDER the content that should be on the left of it.
URL: http://www.nimblefeather.com/index.php

Problem 2: The images here are floating right and left respectively. Again, on my screen, or any other large screen, there is no visible problem, but once you start resizing the screen, the text does no longer fit into the div's.
I tried: min-width.
Result: No visible change.
URL: http://www.nimblefeather.com/comics.php




Problem 3: When resizing the width of the comic images gets adjusted, but the height does not, resulting in well, a weird image. The height should also change accordingly. In addition, on smaller screens the word (heading1) Chapters sometimes sticks out of it's Div. How would this be solvable?
URL: http://www.nimblefeather.com/comics/drawingshady/thefutureofsumarnya/chptr1.php

Question: Is it possible to make the website appaer like on my screen on other resolutions as well? By simply "resizing it" to their resolution (example: My resolution: 800 x 600, and visitor X resolution 400 x 300, to let the CSS resize the page to 50%, including text and images,...?)

Thanks in advance =D

Share this post

Link to post
Share on other sites

Let's start with this CSS rule :



div#container {background-color:rgb(106,183,239);
border:1px solid black;
margin:0% 10% 1% 8%;

width is 83% plus right margin 10% and left margin 8%. That is 101%.


Not only is it already too wide, it has no slack and when you specify in percentages, you can run into problems is there is no slack because the percentage has to be converted to pixels which cannot be fractional so when the browser rounds up you get broken lay out.


What is even more curios is floating an element the is full width of its parent. There is no reason or effect to floating it except add excess coding. As for a float going below other content, the is the expected behavior when the available width is not enough to do the float. Content outside of its box is also normal when the box is nor big enough to hold it, and the dimensions are using a flexible unit of measure.


I think you problem is that you are trying to do layout with CSS. That is what HTML is for. do a base layout without any CSS. It may not look pretty, but doing HTML only will force you to think about the relationship between elements, and that is what you need to understand so you can decide what is important for understanding the site at different resolution.


Once you have layout then do the CSS for presentation. Use only what is essential. If you cannot explain the reason a property must be used or cannot explain the reason for the specific value, then you need to stop and think. If you can't explain it; then you don't need it. If you needed it you would see why as soon as you removed it and something broke.


Once you have the basic layout styled you need to learn about media queries and how to use them to adjust the presentation cross-resolution and cross-device.

Edited by COBOLdinosaur

Share this post

Link to post
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.

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...