homepage Welcome to WebmasterWorld Guest from 54.145.172.149
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
dt and dds of different heights.
jonasisme



 
Msg#: 4332063 posted 1:15 pm on Jun 28, 2011 (gmt 0)

Hi people,


i'm currently facing some problems in a project i'm working on..

SORRY, THE SUBMIT BUTTON NEED IN THE FIRST DD, NOT THE SECOND!
[IMG]http://img683.imageshack.us/img683/597/helpuh.png[/IMG] [imageshack.us]

I have a DL with DT(option) en two DDs (input field and description)
now the problem is sometimes i have a text area which is quite heigh..

so as you can see on the picture the submit button isn't on its correct place.. it should be in the first DD on the next line..

But i can't really put a height because i also have radio buttons and inputfields where i do'nt have this problem..

Anybody know whats the best way to fix?

Thanks!

 

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4332063 posted 1:55 pm on Jun 28, 2011 (gmt 0)

... it should be in the first DD on the next line..


Where is the submit button in your markup?

I think you might need to post some of your markup?

jonasisme



 
Msg#: 4332063 posted 3:09 pm on Jun 28, 2011 (gmt 0)

Hey thanks for the reply!
Check the image below
[img683.imageshack.us...]

this is the structure:

<dl>
<dt>an option</dt>
<dd>input</dd>
<dd>description of an option</dd>
....above repeated few times with different input fields....
<dt>&nbsp;</dt>
<dd>submit button ish ere </dd>
<dd>&nbsp;</dd>
</dl>

But as the text area input its height is bigger then the description its height.. the floating dt comes on the same line instead of on the next line.. check the image!

An solution would be defining special classes for text area that give the last id an height... but you might have another solution?

Thanks

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4332063 posted 4:08 pm on Jun 28, 2011 (gmt 0)

Are you clearing your DTs? Presumably each DT/DD/DD group should appear on one line. eg...
dl dt { 
clear:both;
}


...and welcome to WebmasterWorld! :)

jonasisme



 
Msg#: 4332063 posted 5:50 pm on Jun 28, 2011 (gmt 0)

Haha, yes indeed!

Thanks!

Solved!

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4332063 posted 4:10 pm on Jun 29, 2011 (gmt 0)

Another good way to do this is the "shrink wrap" approach. It relies on the basic fact that a floated container will contain any children floated within it. So if you float everything left (or right,) float the parent container too. This is useful if you want to cut down on the number of clearing elements you need in your markup - most clearing elements are empty junk with no inherent semantic meaning.

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4332063 posted 6:41 pm on Jun 30, 2011 (gmt 0)

It relies on the basic fact that a floated container will contain any children floated within it.


Presumably this is the same principle that a parent container with
overflow:hidden will also contain floated children?

Although I think @jonasisme is a bit stuck if using a DL. A parent container around each (DT DD DD) block would certainly invalidate the HTML.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4332063 posted 7:51 pm on Jun 30, 2011 (gmt 0)

A parent container around each (DT DD DD) block would certainly invalidate the HTML.

Isn't the <dl> itself the parent?

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4332063 posted 10:42 pm on Jun 30, 2011 (gmt 0)

Yes the <dl> is the parent. But the way the design is structured with the <dt><dd><dd> always in a row, like so:

<dl>
<dt><dd><dd>
<dt><dd><dd>
</dl>


...kind of warrants some kind of additional container around each <dt><dd><dd> block in order to apply rocknbil's "shrink wrap" approach. Since the initial problem seemed to be that the <dt> wasn't clearing the preceeding <dd>. But such a container would obviously be invalid. So I was really questioning whether you could even apply the "shrink wrap" approach to such a structure? May be the <dl> element is the wrong tool to begin with?

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4332063 posted 12:30 am on Jul 1, 2011 (gmt 0)

@jonasisme and welcome to [webmasterworld.com] :)

@penders, yes the "shrink wrap" technique will work using the dl as the "container".

However, I agree there could well be problems achieving the desired layout using floats - difficult to tell as we don't have the css. ... were you thinking that a form is usually the best tool for a form?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved