ron2fs Posted March 3, 2014 Share Posted March 3, 2014 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 More sharing options...
newseed Posted March 3, 2014 Share Posted March 3, 2014 You might try float: left to see if that gives you want you are looking for. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 3, 2014 Share Posted March 3, 2014 Using position:relative; means its area will be that of its original position + its new current position. Link to comment Share on other sites More sharing options...
davej Posted March 3, 2014 Share Posted March 3, 2014 <!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 More sharing options...
ron2fs Posted March 8, 2014 Author Share Posted March 8, 2014 Hello many thanks for your input; I am now putting this piece of code onto my test page; will report back later Ron Link to comment Share on other sites More sharing options...
ron2fs Posted March 9, 2014 Author Share Posted March 9, 2014 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 More sharing options...
ron2fs Posted March 9, 2014 Author Share Posted March 9, 2014 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 More sharing options...
astralaaron Posted March 9, 2014 Share Posted March 9, 2014 <br style="clear:both"> instead of empty paragraph Link to comment Share on other sites More sharing options...
dsonesuk Posted March 9, 2014 Share Posted March 9, 2014 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 More sharing options...
ron2fs Posted March 22, 2014 Author Share Posted March 22, 2014 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 More sharing options...
Steven Posted March 24, 2014 Share Posted March 24, 2014 This article by Nicolas Gallagher has helped me out a number of times. It's an updated, simpler version of the clearfix issue you've been dealing with. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now