CSS : align at a certain position

I know what I want but I'm not sure how to best express it, so please be forgiving.

I have numbered headlines in my page, and paragraphs following the headlines. I wish to align the text of the paragraphs the same as the start of the title of the headline, and the numbers of the headlines being aligned to the right, at for example 0.5em of the title of the headline.

Here is an example in monospace font:

1. Introduction This is the beginning of the introduction. 1.1. Sub header Another paragraph here and when it comes to having another line, it is indented as the first one. 1.1.1. Sub-sub header Notice how the headlines and paragraphs are exactly aligned, whereas the numbers in the headlines are shifted to the right ? 1.2. Sub header 2 I'm sure you get the picture...

What is the best way to achieve this in HTML/CSS ? It would be trivial to use tables but I wish to do otherwise if there is a cleaner way.

-------------Problems Reply------------

This is how I would do it:


<ul id="list">
<p>This is the beginning of the introduction.</p>
<h3>Sub header<em></em></h3>
<p>Another paragraph here and when it comes to having
another line, it is indented as the first one.</p>
<h4>Sub-sub header<em></em></h4>
<p>Notice how the headlines and paragraphs are exactly
aligned, whereas the numbers in the headlines are shifted
to the right ?</p>
<h3>Sub header 2<em></em></h3>
<p>I'm sure you get the picture...</p>


#list {
counter-reset: level1 0 level2 0 level3 0;

#list h2,
#list h3,
#list h4 { margin-left:-50px; }

#list em { float:left; width:40px; padding-right:10px; text-align:right; }

#list h2 em:before {
counter-increment: level1 1;
content: counter(level1, decimal) ".";

#list h3 em:before {
counter-increment: level2 1;
content: counter(level1, decimal) "." counter(level2, decimal) ".";

#list h4 em:before {
counter-increment: level3 1;
content: counter(level1, decimal) "." counter(level2, decimal) "." counter(level3, decimal) ".";

Live demo: http://jsfiddle.net/9bkwQ/

Notice that:

  1. There are no CSS classes set on the HTML elements - there is no need for that (Result: cleaner code)
  2. The numbering is auto-generated via CSS counters which means that you don't have to update the numbering whenever you want to insert an item between other items.

I imagine you're using custom numbers? You're placing them there yourself without the use of ? I'd imagine so with that system.

Either way, I'd probably set up some divs to look like this:

Quick Note: You'd need to add clear:both to the main container to have them stack nicely.

<div style="display:inline-block; width:100%; clear:both")
<div style="float:left; margin-right:5px">
<div style="float:left">
The first headline

Something like this would work fine and you could use your own styles to manipulate the structure/design, but again, I don't know if it's the absolute best way.

Check out a JSFiddle of it here: http://jsfiddle.net/uvQsR/2/

<div class="section">
<span class="number">1.1.</span>
<h4 class="heading">Sub header</h4>
<p> Another paragraph here and when it comes to having
another line, it is indented as the first one. </p>

with css

.section {

You could do something like this, adjusting the width and margin as necessary (and depending on the depth/length of the header numbers)

<h2 class="number">1.</h2><h2 class="text">Introduction</h2>
<p>This is the beginning of the introduction.</p>

<h2 class="number">1.1</h2><h2 class="text">Sub header</h2>
<p>Another paragraph here and when it comes to having<br />
another line, it is indented as the first one.</p>


h2.number{display:inline-block; width:30px;}
p{margin-left:30px; margin-bottom:10px;}


Category:css Views:0 Time:2011-07-28

Related post

  • Half the page + CSS alignment 2011-07-30

    I didn't know how to explain but draw a picture of the CSS align that I need. The template has a fixed width and the green area represents the main content and blue division provides the title for that page. The green div has the following css: #cont

  • Need solution / support with css alignment issue 2011-11-24

    I am experiencing weird behavior with css alignment of some div's on my website. Here is demonstration of the problem: http://jsfiddle.net/PT3jU/1/ You can see links "Comments" "Stories" "Subscriptions" on the left, where as I expect them to be at th

  • Css align to bottom of page 2012-01-19

    I want my footer to always be on the bottom and move to adjust to the size of the content inside the page. Right now i have dynamic cotent that covers the footer because its to much content. How can i fix my css div#Footer { width: 100%; height: 80px

  • Css - Align image to bottom with vertical-align not working 2014-04-01

    I've settle up sizes, table-cell, and stuff, yet it is not working. I need to align the girl image on the bottom of the div, the text and button are fine. Here is my code: <style type='text/css'> .wrapperbannerbanner{ overflow:hidden; color:#FF

  • why the CSS alignment is different from Firefox3.0.11 and Firefox 3.5 2009-07-31

    why the CSS alignment is different from Firefox3.0.11 and Firefox 3.5? --------------Solutions------------- May be because of an upgrade to the gecko engine(which is used for rendering pages by Firefox) from 1.9 to 1.91 in Firefox 3 to 3.5 . The rend

  • IE7 CSS alignment issue 2011-03-25

    The following code is working perfect on firefox and IE8 . But on IE 7 the middle "search input text field" is not aligning properly with other two feilds , It is coming down bit .. Here is the code and thanks your help <!DOCTYPE html PUBLIC "-//W

  • Vertical CSS Multi-Level Menu That Positions Itself at the Top of the div, not at the 1st Menu Option's Position 2011-09-03

    Most CSS vertical menus have their second level and third layer menus popping out right beside the 1st level menu. This creates a space if you go to the third option in the first level menu. The second level menu from that third option is positioned

  • CSS Alignment Problem 2008-12-23

    I am trying to layout a header for a web site and I would like to have 4 containers in the header for dropping various user controls into. The 4 containers need to be positioned top left, top right, bottom left and bottom right inside the main the he

  • In CSS, getting a logo to position over a central layout and stick out to the left? 2009-04-01

    I'm really stuck here... I have a site layout with a central layout (it's about 922px width, centered on the page)... I have a little logo that is to the top left of this, but it sticks about 10 pixels to the left of the central design. If you can im

  • CSS aligning problem 2009-09-07

    This is my markup, I need to align gray label under the blue label and keep the number aligned with blue label. CSS: body { font-family: arial, helvetica, sans-Serif; } #talkbacks .noshow { clear: both; display: table; /*padding-left: 14px;*/ line-he

  • html and css: aligning a select to the right edge of a table 2009-09-16

    Consider the following HTML snippet. The desired effect is to have a dropdown be positioned right above a table. <!-- this is actually in a proper CSS class, not inline--> <div style="float:left; min-height:1px; padding:15px 2% 20px; positio

  • Align div right with position fixed 2010-05-13

    I want to show a div which is always visible with the user as the user scrolls the page Are there any javascript solutions? I have used the css position:fixed; Now i want to show the div at the right hand corner of the parent div I used the css .test

  • CSS problem with silverlight component position. Cannot set height that i want 2010-09-18

    I want to make simple content page with silverlight with next requirments: Page must contains: top space for banners(html) center - silverlight component. and he will stretch to fitt page. bottom space for banners(html) Looks quite easy but i faced p

  • CSS alignment: horizontal blocking? 2010-11-15

    I am working on a CMS template and try to find out if this is possible at all. I was not able to find anything on the net, maybe I just used the wrong keywords. Have this model given: <div> #1 is a fixed 'banner' container aligned left. <div

  • Css aligning/scroll bar problem 2011-01-08

    yes another problem with this scroll bar alright so I started the website over again that was mentioned here and I am having problems with this scroll bar again alright so all I have is a single image in a div tag <div align="center" id="Suggestio

  • CSS: display:inline-block and positioning:absolute 2011-02-18

    Please consider the following code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> .section { display: bloc

  • Vertically align text bottom - absolute position, without knowing width 2011-04-26

    I'm getting stumped here... I'm trying to vertically align text in a top nav that has two different lines on each li. Normally, I would take the position:relative + position:absolute route, however, that only works if you set the width of the element

  • CSS: aligning elements inside a div 2011-04-30

    I have a div that contains three elements, and I am having problems correctly positioning the last one. The div at the left has to be at the left, the one in the middle needs to be centered, and the third one needs to be to the right. So, I have some

  • can you align an image with position:relative with an image that has position:absolute? 2011-06-11

    I have two images on a page. The first image has position:relative and the second image is right under the first image with position:absolute. Is it possible to align the second image with the other one so that their relative positions remain the sam

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.193 (s). 11 q(s)