/    Sign up×
Community /Pin to ProfileBookmark

Two elements on right above another

Copy linkTweet thisAlerts:
Oct 10.2005

This is difficult to explain so I made an image [URL=http://www.easyest.com/helpdesk/dammit.gif]here[/URL] to illustrate what I’m trying to do. The two dropdown selections have titles so I can’t just put them in an element that aligns them right. I’ve tried putting each in a div and floating them in every manner I can think of with clear:left, clear:right, and clear:both. Nothing I’m coming up with gives me the alignment I’m looking for in that image.

I can do it with tables in about two minutes, but…

Div #1, and Div #2 are floated left and right within the red-bordered <div>. Putting the first selection and its label on the right in the green-bordered <div> above it was a snap. Adding the second one beside it has defeated me.

There is something about floats and clearing floats that is simply too abstruse for my concrete mind. I have gotten along fairly well in CSS other than that. The concepts have been explained to me many times in many ways. I have read probably two dozen articles on it. I simply do not get the concept of how floats work and how clearing them works. I can put a left and a right in a container, and then put a element below them that has “padding-top” rather than “margin-top” and that is it. Beyond that someone has to take me by the hand and lead me down the path because it is simply a concept that my mind refuses to grasp.

Anyway, my ranting aside, can someone show me how to do that, or do I resort to a table?

Thanks.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangOct 10.2005 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;form layout&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
&lt;!--
// all JavaScript here

//--&gt;
&lt;/script&gt;

&lt;style type="text/css"&gt;
&lt;!--
label {
display:block;
float:right;
padding:0 0.5em;
font-weight:bold;
}
#greenbox {
overflow:auto; width:100%; /* clear float */
border:1px solid green;
}

--&gt;
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="greenbox"&gt;
&lt;label&gt;Sort by:&lt;br&gt;
&lt;select name="select1"&gt;
&lt;option value="1"&gt;bla bla bla&lt;/option&gt;
&lt;option value="2"&gt;bla&lt;/option&gt;
&lt;option value="3"&gt;bla&lt;/option&gt;
&lt;/select&gt;
&lt;/label&gt;
&lt;label&gt;Include:&lt;br&gt;
&lt;select name="select2"&gt;
&lt;option value="1"&gt;bla bla bla&lt;/option&gt;
&lt;option value="2"&gt;bla&lt;/option&gt;
&lt;option value="3"&gt;bla&lt;/option&gt;
&lt;/select&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@JayhawkauthorOct 10.2005 — Thanks anyway, Fang. The table took me about 45 seconds to do. Works fine.
Copy linkTweet thisAlerts:
@JayhawkauthorOct 10.2005 — I know tables are not the best way to do it, and I don't really want to. I took a few more stabs at it using <labels> inside a <div> (and tried <div>'s in case that made a difference). I included the overflow:auto in the container, but no matter what I do with two float:right's in succession, one is on top of the other. Plenty of room for them to be side by side....
×

Success!

Help @Jayhawk 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...