Top Align Div and Paragraph
shapper
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
Jukka K. Korpela
> 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/
shapper
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
Jukka K. Korpela
> On Dec 19, 1:35 pm, "Jukka K. Korpela" <jkorp...@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/
Ben C
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.
Gus Richter
> 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
Gus Richter
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.
Ben C
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.
Gus Richter
>>>> 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