Jump to content

css positioning


ron2fs
 Share

Recommended Posts

Hi!

 

 

I would like to position two blocks of text on the same horizontal line on a scrolling page; the first text is enclosed with:

 

 

<div class = "firstposn"> block of styled text </div>

 

 

and the second with:

 

 

<div class="secondposn">block of styled text </div>

 

 

The CSS style is:

 

 

.firstposn{ position:relative; left:10%;}

 

 

and:

 

 

.secondposn{position:relative; left:70%}

 

 

The styling of the text with "width" is such that the blocks would not overlap. However, when displayed, the blocks are positioned one after the other vertically. I have tried this with other elements - e.g. two images, an image and a list, and an image and a block of text - all with the same presentation - i.e. one after the other vertically. Previously, I used tables to get these items horizontally adjacent.

 

 

I would appreciate some guidance on this.

 

 

Many thanks

 

Ron

Link to comment
Share on other sites

<!DOCTYPE html><html><head><meta charset="utf-8"><title>tab</title><style>.firstposn{ float:left; margin-left:10%;border: 1px dotted #bbb;}.secondposn{ float:right; margin-right:10%;border: 1px dotted #bbb;}</style></head>  <body> <p>The styling of the text with "width" is such that the blocks would not overlap.  However, when displayed, the blocks are positioned one after the other vertically. </p><div class="firstposn">block of styled text</div><div class="secondposn">block of styled text</div></body></html>
Link to comment
Share on other sites

I've tried Davej's piece of code - works great in the horizontal plane, but the following material - tables, images text - pushes up between the two blocks of text. I have also tried this code with two images - same result. Is there some way of keeping the following elements in their proper place?

 

Ron

Link to comment
Share on other sites

eureka!! I found the solution - I searched through the tutorial on CSS and there was this little gem:

 

 

<!-- .text_line{clear:both;margin-bottom:2px;} -->

 

 

 

which I linked by styling a non-breaking space:

 

 

<p class="text_line"> ;</p>

 

works fine!

 

I think this resolves my original problem unless you have further suggestions, so once again, many thanks for your help.

 

Ron

Link to comment
Share on other sites

Use a container with overflow: hidden; or class that will apply clear: both to next sibling element.

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>tab</title>        <style type="text/css">            .firstposn, .firstposn2{                float:left;                margin-left:10%;                border: 1px dotted #bbb;            }            .secondposn, .secondposn2{                float:right;                margin-right:10%;                border: 1px dotted #bbb;            }            div{background-color: #ccc;}            section{overflow:hidden; background-color:  yellow;}/* better option don't have to worry about old browser compatibility*/            .clear + * {clear: both}        </style>    </head>    <body>        <div class="wrapper">            <div id="content">                <p>The styling of the text with "width" is such that the                    blocks would not overlap.  However, when displayed, the                    blocks are positioned one after the other vertically.                </p>                <section>                    <div class="firstposn">block of styled text</div>                    <div class="secondposn">block of styled text</div>                </section>                <p>The styling of the text with "width" is such that the                    blocks would not overlap.  However, when displayed, the                    blocks are positioned one after the other vertically.                </p>                <div class="firstposn2">block of styled text</div>                <div class="secondposn2 clear">block of styled text</div>                <p>The styling of the text with "width" is such that the                    blocks would not overlap.  However, when displayed, the                    blocks are positioned one after the other vertically.                </p>            </div>        </div>    </body></html>
Link to comment
Share on other sites

  • 2 weeks later...

many thanks for all your help; I can now position items as I want. I did find the code from dsonesuk to be over my head! I've now opened a new thread on tables using CSS

 

Ron

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...