Am having a bit of a problem distributing css divs within a container horizontally.
I draw a css html box and then insert 4 html boxes.
Then I float one left and the rest right and set all at 25% of the page width.
Unfortunately I get a gap left between the left float and the right float.
What am I doing wrong?
TIA
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Nothing, you’re just hitting up against physics. You cannot subdivide
a pixel, but if you use percentages you may be trying to do that.
Browsers differ in their approach to fractional pixels, too. Some
round UP and others round DOWN, irrespective of the math of the
situation. (Safari nearly always rounds down, even if your fractional
width is .99 or something silly like that.) If you set all of your
boxes to float left, you will at least keep the gap happening all the
way on the right, rather than in the middle where it stands out. Or
set everything to float right and have the gap on the left. Or use a
fixed width for your page, and a pixel dimension for each “quarter” of
the page.
Walter
On Mar 23, 2009, at 3:01 PM, John-Paul Kernot wrote:
Unfortunately I get a gap left between the left float and the right
float.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 23 Mar 2009, at 19:01, John-Paul Kernot wrote:
Am having a bit of a problem distributing css divs within a
container horizontally.I draw a css html box and then insert 4 html boxes.
Then I float one left and the rest right and set all at 25% of the
page width.Unfortunately I get a gap left between the left float and the right
float.What am I doing wrong?
Have you tried setting them all to float left?
best wishes,
Paul Bradforth
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Walt. I presume that it is just a quirk of FWY that I cannot insert 33.3% in the width box? It only seems to accept whole numbers.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes, Paul. Same issue with gap on right between last box and container.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It wouldn’t matter, since the result of that percentage wouldn’t be a whole number. I usually set two thirds to 33% and the third to 34%.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 23 Mar 2009, at 19:30, John-Paul Kernot wrote:
Yes, Paul. Same issue with gap on right between last box and
container.
Yes, I figured it would be, but thought that it might look better. But
I see that Walt has come up with the definitive answer 
best wishes,
Paul Bradforth
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walt - I shall then do the same! Thanks for the input!
Incidentally, if there is anybody else out there grappling with the box css model, keep trying as it is ultimately the way to go!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here you go. This will help you solve the riddle.
http://kematzy.com/blueprint-generator/
Just fill in the blanks and hit “Fit” or “Generate CSS.”
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi JP,
As long as the containers width can be divided by 4 the output won’t
have a gap, even though Freeway shows a very small one (bug logged
first thing tomorrow).
Regards,
Joe
On 23 Mar 2009, at 19:30, John-Paul Kernot wrote:
Yes, Paul. Same issue with gap on right between last box and
container.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 23 Mar 2009, 7:59 pm, John-Paul Kernot wrote:
Walt - I shall then do the same! Thanks for the input!
Incidentally, if there is anybody else out there grappling with the box css model, keep trying as it is ultimately the way to go!
What seems to be the issue? Is it general layout, figuring out how the boxes should be placed? I’m in the middle of working on releasing “Creating Box-Model Style Layouts” and I could cater some ideas into the video-cast.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Dan,
Thanks for the tip. If you are doing some more CSS box model screencasts (which are superb btw), I would live to see how you target boxes to rearrange the layout. It seems quite cumbersome right now.
For example, I just wanted to change the footer on a page to include a border colour on the html box. So in order to do this I have to paste the new html box back in the correct place. Not so bad if it’s a footer but maybe not so good if it’s elsewhere.
In any case, it takes 10 mouse clicks minimum to do this. Now I have 38 pages with the same footer, so I just did 380 mouse clicks. Fun? Nope!
Would love to know how to target that particular div to change it through all the pages. Is it possible even?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 24 Mar 2009, at 11:49, John-Paul Kernot wrote:
Thanks for the tip. If you are doing some more CSS box model
screencasts (which are superb btw), I would live to see how you
target boxes to rearrange the layout. It seems quite cumbersome
right now.
It’s easier if you use the left hand panel of Freeway set to ‘Page’
instead of ‘Site’ (click the name at the top where it says ‘Site’). No
need to go clicking in the layout this way.
For example, I just wanted to change the footer on a page to include
a border colour on the html box. So in order to do this I have to
paste the new html box back in the correct place. Not so bad if it’s
a footer but maybe not so good if it’s elsewhere.
As a matter of interest, why did you have to paste something back —
couldn’t you just select the box, and apply the border?
In any case, it takes 10 mouse clicks minimum to do this. Now I have
38 pages with the same footer, so I just did 380 mouse clicks. Fun?
Nope!Would love to know how to target that particular div to change it
through all the pages. Is it possible even?
You could also make a style for it. If your footer DIV is called
‘footer’, then you could make a CSS style using the Styles palette,
called #footer and put the border attributes in there, in the
‘Extended’ part. Then, you can change every footer on every page
simply by editing the style rather than the footer.
One of the things that makes CSS so great!
best wishes,
Paul Bradforth
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Looking forward to the “Creating Box-Model Style Layouts” screencast.
Maybe you can add some information on how to change or add things after you’ve laid out the site.
Sometimes seeing someone do them is easier to pick up rather than reading instructions.
Robert
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
As a matter of interest, why did you have to paste something back
couldn’t you just select the box, and apply the border?
Could have done. That is 3 mouseclicks. But I also changed the padding and margin on the div, so it made more sense to cut / paste the whole div.
You could also make a style for it. If your footer DIV is called
‘footer’, then you could make a CSS style using the Styles palette,
called #footer and put the border attributes in there, in the
‘Extended’ part. Then, you can change every footer on every page
simply by editing the style rather than the footer.
One of the things that makes CSS so great!
Now, this is what I am after, but I am so dumb I need a screencast!
Incidentally, while I am here, I once changed the text on a footer and used global find/ replace to change the text in the whole site. Yup, as you guessed no links get copied. Any way around that one?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Now that paulbradforth has pointed out the use of a style to target the footer, I think that a needed screen cast would show how to use the style editor, including the difference between #tag styles and .class styles as this seems to cause alot of confusion.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options