473,395 Members | 2,798 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

css positioning (float, div, margin, width...) confusing me like crazy

I've been happily chugging along thinking I understood floating divs
and now find that I know a lot less than I thought I did. And the
more I try "fixing" things, the worse it gets. A lot of what I'd been
doing looked okay in IE 6.0, but in Gecko browsers like my Netscape
7.1 (I've been told they conform better to the standards than does
IE), they look terrible.

http://trialanderror.100freemb.com/2...5FloatDiv.html is a page I
put together with some issues I'm struggling with, and it should be
easy to view my css/html and offer me suggestions.

The borders that I use on the page are merely intended to clearly show
the area of the various divs; I realize that the width of the borders
does have an impact on the screen width available for my use.

Basically, my issues that I can think of are at least:

1. I want a box on the left edge of the browser window. Next to it, I
want a box with its left edge immediately to the right of the first
box, and its right edge to be the very edge of the browser window.
Yet I cannot figure out how to make that happen automatically; I have
to manually size that box. What am I doing wrong?

2. If I have an area of the screen (the whole screen, half the screen,
400 pixels worth; whatever) and want to have four (or any number) of
objects spread out evenly spaced within that area, what is the easiest
correct way to do it? Again, I'd like to have the browser figure out
where to put them, rather than me manually calculating spacing, and
have the visual appearance survive a resizing of the browser window.

3. In the above example that I have posted, the objects display
OUTSIDE the box I'd expect them to be in, at least in Netscape 7.x.
Why?

4. I am sure that my way of doing even things that seem to render okay
could be improved.

I think a look at
http://trialanderror.100freemb.com/2...5FloatDiv.html will be more
clear than reading the above. Thanks in advance to all for any help
or suggestions.
Jul 20 '05 #1
1 4726
In article trialanderror wrote:
I've been happily chugging along thinking I understood floating divs
and now find that I know a lot less than I thought I did. And the
more I try "fixing" things, the worse it gets. A lot of what I'd been
doing looked okay in IE 6.0, but in Gecko browsers like my Netscape
7.1 (I've been told they conform better to the standards than does
IE), they look terrible.
Have you read and understood CSS box modell from spec? Notice that it is
different than IE with quirks mode.
http://trialanderror.100freemb.com/2...5FloatDiv.html is a page I
put together with some issues I'm struggling with, and it should be
easy to view my css/html and offer me suggestions.

The borders that I use on the page are merely intended to clearly show
the area of the various divs; I realize that the width of the borders
does have an impact on the screen width available for my use.
And many other things too. If you need help for some real case, include
all "irrelevant" info too, like if you want to use borders/background
colors. Those pretty often make things more complicated.
Basically, my issues that I can think of are at least:

1. I want a box on the left edge of the browser window. Next to it, I
want a box with its left edge immediately to the right of the first
box, and its right edge to be the very edge of the browser window.
Yet I cannot figure out how to make that happen automatically; I have
to manually size that box. What am I doing wrong?
You are floating them both. Only float the other. Use left margin same
size as float for no-floated.
2. If I have an area of the screen (the whole screen, half the screen,
400 pixels worth; whatever) and want to have four (or any number) of
objects spread out evenly spaced within that area, what is the easiest
correct way to do it? Again, I'd like to have the browser figure out
where to put them, rather than me manually calculating spacing, and
have the visual appearance survive a resizing of the browser window.
You could say
wrapper {text-align:center;}
object {display:inline-table;}

It does work on Opera 6+ (maybe 5, can't remember, but none else.)

I don't think other browsers allow any sencible way.
3. In the above example that I have posted, the objects display
OUTSIDE the box I'd expect them to be in, at least in Netscape 7.x.
Why?
Floats are taken out of flow, and box measures don't change because of
floats. Floats only affect line boxes. Above way would solve this too.
4. I am sure that my way of doing even things that seem to render okay
could be improved.


Unfortunately with CSS, the best way don't necessarily work (with html,
this case is somewhat rarer, fortunately). When doing layouts, it is
surprisingly often dispaly:inline-table is easiest way to do things. It
is not once or twice when you get thing working using few rules, and then
make it work with IE and end up with 5 times more code and it is not even
as usable.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Secret Guy | last post by:
I'm trying to understand generally how to make a grid of variously sized boxes using CSS. The first idea I had was to make a box where I can see the margin, padding, border and content edges, and...
5
by: Joy | last post by:
Hi guys, I am in a tricky situation, I really really hope someone will help me. I got a layout with a main container and three colums inside. Main container: 100% height; 90% width; float: left...
2
by: Viken Karaguesian | last post by:
Hello all, This question is half css and half html based, so I chose this group. I have a theortical question. When positioning floating <div>'s, how much does it matter what order you put itin...
1
by: Luciano A. Ferrer | last post by:
Hi, I am trying to achieve this simple layout http://img478.imageshack.us/my.php?image=boceto2ah.gif and I have problems with the navigation div (the numbers) btw, the right way its somthing...
8
by: Woodchuck | last post by:
Hi:) I've been trying to position some element's on my page and I can't come up with a way to equally position 4 DIV's in another DIV without explicitly setting the width of the "child" DIV's....
3
by: goldenboy651 | last post by:
My Positioning in IE 6 is exactly the way I want it, but when I view the page in my firefox browser things are out of place. When I try and change the css my IE page moves, but the firefox doesn't. ...
2
by: nicky77 | last post by:
Hi there, I've uncovered a problem which I only have with IE6, surprise surprise. I have a centered layout for the main content of my web page and I am populating the main section with tabulated data...
2
by: Slick50 | last post by:
I am about ready to finally give up on CSS and fall back to tables. Positioning is becoming too frustrating for the novice with CSS alone... I have a simple form. Conceptually I divide up each...
4
by: Christopera | last post by:
Hello, I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.