/    Sign up×
Community /Pin to ProfileBookmark

a more advanced float problem, i think

Copy linkTweet thisAlerts:
Jul 20.2005

i could place: #column before #content, and float #column with a 200px width, and just float the rest of #content…

but i want to put: #content before #column, and here’s what i have:

[code=html]<div id=’content’>
lksdafljsadfljsalfd
</div>

<div id=’column’>
lksdafljsadfljsalfd
</div>[/code]

and the css:

[CODE]
div#content {
float: left;
margin-right: 300px; /* 300 just to be safe */
}
div#column {
float: left;
/*width: 200px */ doesn’t help either…
}[/CODE]

in theory it should work… #content will give up 300px to the right and the 200px #column should fill in the space… but it doesn’t…

[url]http://www.accessjdm.com/test.html[/url]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@drhowarddrfineJul 21.2005 — All you are saying in your code is that there is a margin from the right browser edge of 300px to your test. The column can't go there because there is nowhere to go. You need to control the width of #content to do what you want to do.
Copy linkTweet thisAlerts:
@JDM71488authorJul 21.2005 — hmm... i was letting #content default to display: block as a div to fill in the space so controlling the width would be hard to do i think...

is there a way to do it besides absolute positioning and with #content first?

its not problem at all if #column was first (set width and float it right then float #content right) but i want to try and steer away from that if possible...
Copy linkTweet thisAlerts:
@SiddanJul 21.2005 — Have you tried first creating a new page and concentrate only on the problem and if it works there then there is something else quirking in your main page
Copy linkTweet thisAlerts:
@toicontienJul 21.2005 — What you want is [url=http://www.alistapart.com/articles/negativemargins/]Liquid layouts using negative margins[/url]. This will allow your #column to take up a fixed amount of space and the #content to take up the remaining space, and then allow the #content to come first in the source code.
Copy linkTweet thisAlerts:
@JDM71488authorJul 21.2005 — hey thanks toicontien, that'll do it... ?
×

Success!

Help @JDM71488 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.9,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...