Top Align Div and Paragraph
in [CSS]
|
Prev: Comments wanted
Next: Paragraph with caption in margin
From: Gus Richter on 19 Dec 2009 13:31 On 12/19/2009 11:05 AM, shapper wrote: > 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 Not with the same markup. Even using tables you will have to change the markup, but you don't have to use tables at all. Use this method: All within your "Wrapper" div; Create a "headers" div containing the "Leftheader" and "Rightheader" divs. If there is an instance where there is no right heading required, then simply leave out the content for it. Then create a "Sections" div containing the "LeftSectionText" and "RightSectionText" divs. If the right section text does not align with the left one, which it probably won't, it will be due to Collapsing Margins which can be easily corrected. -- Gus
From: Gus Richter on 19 Dec 2009 13:59 On 12/19/2009 1:24 PM, Ben C wrote: > 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). Defining height for the heading would still require changing the markup by at least adding <h2></h2> in the "Section" div which would then bring the right text in line with the left div, however, the red background for the "Section" div would still remain in the right header area. This may, or may not, be desirable. Excellent method for an exercise, although I prefer the KISS method in my response, or as you present below. > 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.
From: Ben C on 19 Dec 2009 14:02 On 2009-12-19, Gus Richter <gusrichter(a)netscape.net> wrote: > On 12/19/2009 1:24 PM, Ben C wrote: >> 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). > > Defining height for the heading would still require changing the markup > by at least adding <h2></h2> in the "Section" div which would then bring > the right text in line with the left div, however, the red background > for the "Section" div would still remain in the right header area. This > may, or may not, be desirable. I was thinking of just adding whatever was set as the h2 height onto the top margin of the right hand float, as shapper originally proposed.
From: Gus Richter on 19 Dec 2009 14:24
On 12/19/2009 2:02 PM, Ben C wrote: >>>> 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). >> >> Defining height for the heading would still require changing the markup >> by at least adding<h2></h2> in the "Section" div which would then bring >> the right text in line with the left div, however, the red background >> for the "Section" div would still remain in the right header area. This >> may, or may not, be desirable. > > I was thinking of just adding whatever was set as the h2 height onto the > top margin of the right hand float, as shapper originally proposed. Ref. <http://www.flyondreams.net/TopAlign.html> Adding 1em to top-margin of the right float does indeed move the right text in line with the left text, but the same problem with the red background exists and now additionally the right grey background on the right floated div is also moved down by 1em. As I mentioned, acceptable method if backgrounds are not of concern. -- Gus |