Jump to content
Sheblum

Dividing Paragraph Inside Purple Box

Recommended Posts

I'm having a difficult time diving the paragraph inside the between-page tag. Here is how I would like it to be as:

 

4qlaw1.png

 

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 by Sheblum

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
      .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;            }

Share this post


Link to post
Share on other sites
      .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;            }

 

oqen3t.png

 

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Sheblum

Share this post


Link to post
Share on other sites
<!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 by dsonesuk

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

 

  1. error.png Line 123, Column 8: End tag for body seen, but there were unclosed elements.
    	</body>

  2. error.png Line 13, Column 25: Unclosed element div.
    		<div class="container">

Edited by dsonesuk

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...