Top Align Div and Paragraph
in [CSS]
|
Prev: Comments wanted
Next: Paragraph with caption in margin
From: shapper on 18 Dec 2009 21:59 Hello, I have the following layout: <div class="Wrapper"> <div class="Left"> <h2>header</h2> <p>the text</p> </div> <div class="Right"> <div class="Section"> </div> </div> </div> Is it possible to make the "Section" div top aligned with the text paragraph on Left? My h2 size is defined in em. So maybe make the top margin of Section Div the same as the h2 size? Or maybe I need to take something else in account? I am not sure if this is a reliable way to do this ... Thanks, Miguel
From: Jukka K. Korpela on 19 Dec 2009 08:35 shapper wrote: > I have the following layout: > > <div class="Wrapper"> That's a fragment of markup, not layout. Why don't you post the URL of the current page, even if it is just a draft? The current draft surely tells more than mere markup fragments. > <div class="Left"> One might guess that you somehow try to place this div element to the left of something. But this means that the class name is poorly chosen, as class names should _not_ reflect intended styling but structure. Think about the possibilility that the page is translated into Arabic, so that styling needs to be modified so that elements of class Left are placed on the _right_. The class name looks rather stupid then. > Is it possible to make the "Section" div top aligned with the text > paragraph on Left? You haven't revealed us how you (intend to) make something appear on the left of something else. It surely matters what the entire HTML and CSS context is. > My h2 size is defined in em. If you had specified the URL, we would not need to guess what "h2 size" means. The font size of the h2 element? The line height there? The height of the em element? Something else? > So maybe make the top margin of Section Div the same as the h2 size? Maybe. But how do you expect to know the "h2 size", which probably means the element's height plus its vertical margins (possibly affected by margin collapse)? > I am not sure if this is a reliable way to do this ... The reliable way to do what you probably want to do is to use a table in HTML markup. You won't be praised if you do that, and I'm currently trying to find my asbestos suit as I expect heavy flaming... But if you just revealed the URL and maybe explained a little more (if the draft does not contain real content), I might try to soup up a convincing argument in favor of using an HTML table, on the grounds that you have a table of data (even though the data probably consists of prose text only). -- Yucca, http://www.cs.tut.fi/~jkorpela/
From: shapper on 19 Dec 2009 11:05 On Dec 19, 1:35 pm, "Jukka K. Korpela" <jkorp...(a)cs.tut.fi> wrote: > shapper wrote: > > I have the following layout: > > > <div class="Wrapper"> > > That's a fragment of markup, not layout. > > Why don't you post the URL of the current page, even if it is just a draft? > The current draft surely tells more than mere markup fragments. > > > <div class="Left"> > > One might guess that you somehow try to place this div element to the left > of something. But this means that the class name is poorly chosen, as class > names should _not_ reflect intended styling but structure. Think about the > possibilility that the page is translated into Arabic, so that styling needs > to be modified so that elements of class Left are placed on the _right_. The > class name looks rather stupid then. > > > Is it possible to make the "Section" div top aligned with the text > > paragraph on Left? > > You haven't revealed us how you (intend to) make something appear on the > left of something else. It surely matters what the entire HTML and CSS > context is. > > > My h2 size is defined in em. > > If you had specified the URL, we would not need to guess what "h2 size" > means. The font size of the h2 element? The line height there? The height of > the em element? Something else? > > > So maybe make the top margin of Section Div the same as the h2 size? > > Maybe. But how do you expect to know the "h2 size", which probably means the > element's height plus its vertical margins (possibly affected by margin > collapse)? > > > I am not sure if this is a reliable way to do this ... > > The reliable way to do what you probably want to do is to use a table in > HTML markup. You won't be praised if you do that, and I'm currently trying > to find my asbestos suit as I expect heavy flaming... But if you just > revealed the URL and maybe explained a little more (if the draft does not > contain real content), I might try to soup up a convincing argument in favor > of using an HTML table, on the grounds that you have a table of data (even > though the data probably consists of prose text only). > > -- > Yucca,http://www.cs.tut.fi/~jkorpela/ Hello, I just posted a Url as follows: http://www.flyondreams.net/TopAlign.html Basically, I would like the Section div on the right in red to be aligned with the top of the paragraph on the left. If possible with this markup. The reason is that on Right I can also have a H2 ... or not (Like in the example) If I don't have the H2 on right I would like to push down the Section div so it keeps being aligned with p on left. Note: I am using the left and right naming only for the example. I don't use those names on the web site. Thanks, Miguel
From: Jukka K. Korpela on 19 Dec 2009 12:18 shapper wrote: > On Dec 19, 1:35 pm, "Jukka K. Korpela" <jkorp...(a)cs.tut.fi> wrote: [...] >> -- >> Yucca,http://www.cs.tut.fi/~jkorpela/ Sigh. Comprehensive quoting indicates lack of comprehensive reading. > I just posted a Url as follows: > http://www.flyondreams.net/TopAlign.html That's not the real page, is it? > Basically, I would like the Section div on the right in red to be > aligned with the top of the paragraph on the left. > > If possible with this markup. Not in any convenient way. Absolute positioning comes into my mind, but it would make the page even more rigid. > The reason is that on Right I can also have a H2 ... or not (Like in > the example) So the markup may vary - "this markup" would mean different things. > If I don't have the H2 on right I would like to push down the Section > div so it keeps being aligned with p on left. What prevents you from using a simple table? > Note: I am using the left and right naming only for the example. > I don't use those names on the web site. So we still don't know the real context -- Yucca, http://www.cs.tut.fi/~jkorpela/
From: Ben C on 19 Dec 2009 13:24
On 2009-12-19, shapper <mdmoura(a)gmail.com> wrote: > Hello, > > I have the following layout: > ><div class="Wrapper"> > <div class="Left"> > <h2>header</h2> > <p>the text</p> > </div> > <div class="Right"> > <div class="Section"> > > </div> > </div> ></div> > > Is it possible to make the "Section" div top aligned with the text > paragraph on Left? > > My h2 size is defined in em. > So maybe make the top margin of Section Div the same as the h2 size? > Or maybe I need to take something else in account? > > I am not sure if this is a reliable way to do this ... You could do something like that, provided you set a height on the h2 in em-- you can't make reliable assumptions about exactly how high it's going to end up if you leave it as auto (unless you set line-height, but if you're going to do that, you might as well set height instead-- it's simpler). I don't see any great need for a table as Korpela suggests. If you resort to changing the markup, just put the header in first, normal flow, and the two divs, either or both floated, underneath it. |