Sheblum Posted March 15, 2015 Share Posted March 15, 2015 (edited) I'm having a difficult time diving the paragraph inside the between-page tag. Here is how I would like it to be as: Right now the paragraphs are both on top of each other, not side by side. Is there any way I can add division to them like in the example above? Here is the link to the website that I'm currently working on. Edited March 15, 2015 by Sheblum Link to comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2015 Share Posted March 15, 2015 Try looking into using columns http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_columns Link to comment Share on other sites More sharing options...
proudly Posted March 15, 2015 Share Posted March 15, 2015 also you can use a table Link to comment Share on other sites More sharing options...
Ingolme Posted March 15, 2015 Share Posted March 15, 2015 A table is a bad idea. Back in the 90s when CSS didn't exist, tables were the only way to properly position content. But now we have much better ways to organize the page. Link to comment Share on other sites More sharing options...
Sheblum Posted March 15, 2015 Author Share Posted March 15, 2015 So I was able to do the columns successfully like one of you guys suggested, and I was also thinking about adding a divider between each paragraph so that there won't be so much room between each paragraph. Do I still do it inside the between page tag? Link to comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2015 Share Posted March 15, 2015 .between-page p { -webkit-columns: auto 2; /* Chrome, Safari, Opera */ -moz-columns: auto 2; /* Firefox */ columns: auto 2; position:relative; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; margin: 10px 20px 20px; } .between-page p:before { content: ""; position: absolute; top:0; left:50%; width:3px; bottom:0; background-color: #e9c87f; } Link to comment Share on other sites More sharing options...
Sheblum Posted March 15, 2015 Author Share Posted March 15, 2015 .between-page p { -webkit-columns: auto 2; /* Chrome, Safari, Opera */ -moz-columns: auto 2; /* Firefox */ columns: auto 2; position:relative; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; margin: 10px 20px 20px; } .between-page p:before { content: ""; position: absolute; top:0; left:50%; width:3px; bottom:0; background-color: #e9c87f; } Thank you for that, but the last one looks a bit awkard. The credits list paragraph should be on the left side wheares the sources paragraph should be on the right side. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2015 Share Posted March 16, 2015 Then columns is not what you want, you require a outer wrapper div, and within that two inner divs with width 50%, then you can add individual content separately, columns is one lot of content which move to separate columns specified, much like newspaper columns. Link to comment Share on other sites More sharing options...
Sheblum Posted March 16, 2015 Author Share Posted March 16, 2015 (edited) Then columns is not what you want, you require a outer wrapper div, and within that two inner divs with width 50%, then you can add individual content separately, columns is one lot of content which move to separate columns specified, much like newspaper columns. May you give me an example of it? Also, how do you remove the yellow dividers but keep in the columns? Edited March 16, 2015 by Sheblum Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2015 Share Posted March 16, 2015 (edited) <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript"> </script> <style type="text/css"> * { background-color: #635763; padding: 0; } p { color: #e9c87f; font-family: "Tw Cen MT"; } .row { position:relative; margin: 10px 20px 20px; overflow: hidden; } .row.add-divider:before { content: ""; position: absolute; top:0; left:50%; width:4px; bottom:0; background-color: #e9c87f; ; } h1 { color: #e9c87f; font-family: "Tw Cen MT"; margin: 10px 20px 0; } .col-left, .col-right {width:50%;} .col-left > * { padding: 0 20px 0 0;} .col-right > * { padding: 0 0 0 20px;} .row .col-left {float: left;} .row .col-right {float: right;} </style> </head> <body> <div class="between-page"> <h1>INTRODUCTION</h1> <div class="row add-divider"> <div class="col-left"> <p>The site is at the intersection of Park Presidio and Clement Street.<br>An early city plan established two religious structures as gateposts along the boulevard,<br> the neoclassical Christian Science Church and Congregation Beth Sholom,<br> to be demolished and rebuilt. The design establishes a plinth. On the plinth two buildings are placed to form a courtyard.</p> </div> <div class="col-right"> <p>One is the sanctuary, a solid masonry vessel that floats in water;<br> the other is a radiant glass cube that houses all the other spaces for the congregation.<br> The entry sequence establishes a sacred place within the everyday world through the act of passage, a journey of turning and rising and turning.<br> The point of arrival is the courtyard, which leads to the components of the campus.</p> </div> </div> </div> </body></html> By adding the class 'add-divider' the divider will show. Edited March 16, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Sheblum Posted March 16, 2015 Author Share Posted March 16, 2015 (edited) So I used the example you gave me and then I ended up getting a purple boarder around the selected picture and the selected title and paragraph had dissapeared. http://stuffbysheerly.com/beth-sholom It's the final paragraph. Edited March 16, 2015 by Sheblum Link to comment Share on other sites More sharing options...
proudly Posted March 16, 2015 Share Posted March 16, 2015 A table is a bad idea. Back in the 90s when CSS didn't exist, tables were the only way to properly position content. But now we have much better ways to organize the page. as I can see the ''conversation'' up to now, a table could give a shorter and cleaner code Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2015 Share Posted March 16, 2015 (edited) as I can see the ''conversation'' up to now, a table could give a shorter and cleaner code The table is not shorter and cleaner code, a table is rendered differently than other elements such as divs, and useless for responsive design. A table should only be used for showing tabular data, So I used the example you gave me and then I ended up getting a purple boarder around the selected picture and the selected title and paragraph had dissapeared. Validate page before posting, you have closing div missing, you have the background image container within the divided column container. Line 123, Column 8: End tag for body seen, but there were unclosed elements. </body> ✉ Line 13, Column 25: Unclosed element div. <div class="container"> Edited March 16, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2015 Share Posted March 16, 2015 IF you are still going to use original column code change to .between-page > p:before { background-color: #e9c87f; bottom: 0; content: ""; left: 50%; position: absolute; top: 0; width: 3px;}.between-page > p { -moz-column-gap: 40px; -moz-columns: 2 auto; margin: 10px 20px 20px; position: relative;} Link to comment Share on other sites More sharing options...
Sheblum Posted March 16, 2015 Author Share Posted March 16, 2015 Thanks a lot you guys! That really helped. 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