Is it possible to auto text wrap with CSS the content to avoid cutting-of the text overflowed by a border-radius?
At this moment, my text is hidden out the box:
p {
border-bottom-right-radius: 100%;
border: 1px solid;
padding: 1rem;
overflow: hidden;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
I would like to wrap the text like this image:
UPDATE
Here is a better version using flexbox that will avoid setting any fixed height but require an extra container. The drawback is that part of the text may still overflow. We need to adjust the height accordingly to avoid this:
p {
overflow: hidden;
text-align: justify;
margin: 0;
height:135%; /* we need to adjust this */
border-bottom-right-radius: 100%;
border: 1px solid;
}
p:after {
content:"last";
color:red;
}
p::before {
content: "";
float: right;
width: 100%;
height: 100%;
shape-outside: radial-gradient(farthest-side at top left, transparent 99%, #fff 100%);
}
.box {
display: flex;
}
<div class="box">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. At vero eos et accusamus et iusto odio dignissimos ducimus
qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum
quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem
quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur
aut perferendis doloribus asperiores repellat.
</p>
</div>
</div>
Shape-outside can do this. The only drawback is that it requires a fixed height to work:
p {
border-bottom-right-radius: 100%;
border: 1px solid;
padding: 1rem;
overflow: hidden;
height:350px;
text-align:justify;
}
p::before {
content:"";
float:right;
width:100%;
height:100%;
shape-outside:radial-gradient(farthest-side at top left,transparent 98%,#fff 100%);
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
You can approximate the perfect height using vw unit but still not easy due to the nature of the new shape.
p {
border-bottom-right-radius: 100%;
border: 1px solid;
padding: 1rem;
overflow: hidden;
height:calc(500px - 20vw);
text-align:justify;
}
p::before {
content:"";
float:right;
width:100%;
height:100%;
shape-outside:radial-gradient(farthest-side at top left,transparent 98%,#fff 100%);
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
A fixed width/height based on the content will give a perfect result:
p {
border-bottom-right-radius: 100%;
border: 1px solid;
padding: 1rem;
overflow: hidden;
height:310px;
width:700px;
text-align:justify;
}
p::before {
content:"";
float:right;
width:100%;
height:100%;
shape-outside:radial-gradient(farthest-side at top left,transparent 98%,#fff 100%);
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
Here and idea to have curve on both sides:
p {
border-radius:0 0 1000px 1000px;
border: 1px solid;
padding: 1rem;
overflow: hidden;
height:310px;
width:700px;
text-align:justify;
}
p::before {
content:"";
float:left;
width:50%;
height:100%;
shape-outside:radial-gradient(farthest-side at top right,transparent 98%,#fff 100%);
}
p span::before {
content:"";
float:right;
width:50%;
height:100%;
shape-outside:radial-gradient(farthest-side at top left,transparent 98%,#fff 100%);
}
<p><span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
Related article (I wrote) where you can find more fancy shapes: https://css-challenges.com/custom-text-shape/
Related
I'm developing an app with angular 9, I'm learning angular. I have a fixed header nav app and a scrollable content. I would like to show the vertical scrollbar only in the scrollable content similar to this:
I tried different configurations, for e.g. I set the div of scrollable content with overflow-y: auto, but nothing happen. This is my content:
Thanks,
If you want the vertical scrollbar to apply to just the scrollable content, you can put everything into a container that’s set to the full viewport height, and then use flex to have a second container that’s used for the content to fit the space left after the navbar. Applying overflow: auto to the second container will give it a scrollbar like your illustration.
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.nav {
padding: 1rem;
background-color: blue;
}
.content {
padding: 1rem 35%;
overflow: auto;
flex-grow: 1;
font-size: large;
}
<div class="container">
<div class="nav">
<h1>Nav content</h1>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>
</div>
I have this flex item expanding its height beyond its flex container if font-size is bigger.
.jobTitleDescCont {
display: flex;
flex-flow: column nowrap;
height: 100%;
border: yellowgreen solid 5px;
}
.jobTitleDescCont .jobTitle {
font-size: 1em;
height: 30%;
border: blue 5px solid;
}
.jobTitleDescCont .jobDesc {
font-size: 2em;
height: 70%;
border: green 5px solid;
overflow: auto;
}
<div class="jobTitleDescCont">
<div class="jobTitle">
{{job.title}}
</div>
<div class="jobDesc">
{{job.description}}
</div>
</div>
Here, .jobTitleDescCont .jobDesc font-size: 1em; and it works alright, overflow would work as expected without increasing its height, it's still within its container.
But when you .jobTitleDescCont .jobDesc font-size: 2em;, the flex container also increases and as a result, the flex item too.
Notice here in the lower right corner, the green and the yellowgreen border of the expanding flex item and the flex container is increasing. Of course, the scroll bar can go beyond that too and if the text is long enough, you can scroll beyond the visible part of the scrollbar until you can no longer see the scrollbar.
As per my understanding, the height of the flex container should remain 100% relative to it's container so as the flex item. I also know that flex items are responsive so they can get bigger depending on the content but I have the overflow to take care of the content.
Shouldn't just the overflow scrollbar just get longer as it accomodates bigger font text?
Why is it increasing the height of the flex container and item?
A temporary fix I have is setting height: 575px
.jobTitleDescCont {
display: flex;
flex-flow: column nowrap;
height: 575px;
border: yellowgreen solid 5px;
}
but this defeats the responsive CSS.
On your .jobDesc class you should replace height: 70% with flex: 1 this way it takes up the remainder of the available space. And although I can't reproduce your error you should add box-sizing: border-box to the container, in your case jobTitleDescCont, it might take care of the overflow issue.
I found the culprit but I still don't understand why.
As you can see, there's an <img> here. If I remove that, everything goes well but even if I wrap that into another , the problem exists again. I don't understand why.
.jobTitleDescCont is supposed to respect the height given by their .col1 flex container.
As .ExpandedjobImage is a static image size, giving height: 100% to .jobTitleDescCont will only cause it to occupy the remaining space and allocate the whatever space remains to .jobTitle and .jobDesc which they share in 30-70 ratio.
<div class="col1">
<img class="ExpandedjobImage" :src="'a URL'" />
<div class="jobTitleDescCont">
<div class="jobTitle">
<scale-font-size :text="job.title" />
</div>
<div class="jobDesc">
{{job.description}}
</div>
</div>
</div>
.col1 {
display: flex;
height: 100%;
flex-flow: column nowrap;
width: 30%;
border: solid green 5px;
}
.ExpandedjobImage {
object-fit: contain;
}
.jobTitleDescCont {
display: flex;
flex-flow: column wrap;
border: yellowgreen solid 5px;
}
.jobTitleDescCont .jobTitle {
font-size: 3em;
max-height: 30%;
padding: 5%;
border: blue 5px solid;
}
.jobTitleDescCont .jobDesc {
font-size: 1.5em;
height: 70%;
padding: 5%;
word-break: break-all;
overflow-y: auto;
border: green 5px solid;
}
I think I understood your problem. In the following snippet we will fix the height to 100vh [100% of viewport height] instead of 100%
So, a clean way to keep a 30-70 ratio independently from the font is the following:
JSFiddle
.jobTitleDescCont {
display: flex;
height: 100vh;
flex-flow: column nowrap;
border: yellowgreen solid 5px;
}
.jobTitle {
height: 30%;
font-size: 1em;
border: blue 5px solid;
}
.jobDesc {
height: 70%;
font-size: 3em;
border: green 5px solid;
overflow-y: auto;
}
<div class="jobTitleDescCont">
<div class="jobTitle">ciao</div>
<div class="jobDesc">ciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit</div>
</div>
When the font size increases this will make the scroll bar of the second flex item longer without affecting the entire length of the container, exactly as you were asking
In your specific case the content of jobTitle won't be overflowing its 30% height, so I avoided to add the overflow-y: auto as in the second flex item. If this is not the case it must be added to respect the 30-70 relationship
If the hypothesis above is correct, you can also avoid plenty of empty space in the first flex item replacing the height of the container with max-height
When it comes to the explanation please have a look at this good answer. Here instead a solution to keep using the 100% percentage on the container keeping the intended ratio, which in our case gives:
JSFiddle
html,
body {
height: 100%;
}
.jobTitleDescCont {
display: flex;
height: 100%;
flex-flow: column nowrap;
border: yellowgreen solid 5px;
}
.jobTitle {
height: 30%;
font-size: 1em;
border: blue 5px solid;
}
.jobDesc {
height: 70%;
font-size: 2em;
border: green 5px solid;
overflow-y: auto;
}
<div class="jobTitleDescCont">
<div class="jobTitle">ciao</div>
<div class="jobDesc">ciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit</div>
</div>
I am fairly new to web design and trying to create a responsive page using the Bootstrap grid system. This is a simplified version of a page I am having problems with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
body, html {
width: 100%;
height: 100%;
}
section {
height: 100%;
padding-top: 50px;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Section 1</h1>
</div>
</div>
<div>
<div class="row">
<div class="col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ex suscipit laborum velit atque, eaque dolorum sequi, eligendi laudantium fuga quos dolorem officia sunt totam. Quidem aspernatur vero vitae laborum quaerat dolorum. Consequatur a tempora adipisci qui enim doloribus sequi voluptate, quidem itaque tenetur aut voluptas obcaecati adipisci architecto beatae aliquam? Nemo cumque sequi accusamus nesciunt obcaecati id blanditiis, neque laborum tenetur eveniet, rerum enim voluptatem voluptate itaque eos ut sint officiis molestiae?</p>
<p>Voluptate quis suscipit qui optio nulla unde veniam sed tempore itaque? Expedita optio amet, facere quia at consequatur reiciendis aperiam alias doloremque amet laudantium hic sunt, nulla voluptatem libero id veritatis molestiae ab in, totam dignissimos facere, accusantium voluptates mollitia quae iusto voluptas assumenda temporibus vel quod? Vero ipsa dolore impedit, animi laboriosam expedita similique impedit necessitatibus, repellat distinctio nobis amet voluptatem quae, expedita voluptas rerum?</p>
<p>Ratione aliquid deleniti maxime dicta, fugit incidunt quam omnis ad maiores, blanditiis modi repellat cumque ut nemo. Sapiente sequi sint, illum fugiat eum non deserunt totam doloremque officiis, alias fugiat asperiores doloremque laudantium numquam iste, tempore illum rem quidem.</p>
<p>Quam eum quia pariatur accusantium nesciunt, earum ducimus cupiditate doloribus voluptate fugiat reprehenderit esse obcaecati ex, corrupti dignissimos deserunt molestias tenetur minus, nam cum quaerat quidem, exercitationem iure ipsa vero neque quod iusto necessitatibus illo eos alias? Quae rem officiis accusantium ad expedita ratione modi tenetur reiciendis sint odio, eum animi voluptatem doloremque rem totam, sunt velit nobis blanditiis assumenda vel atque cupiditate nulla quo alias, sequi ullam nam deserunt eius labore nostrum hic tempore asperiores, dolorem repellendus expedita vel sit.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Temporibus tempore dignissimos quaerat quo quisquam delectus commodi nesciunt sed.</p>
</div>
</div>
</div>
</section>
</body>
</html>
This looks fine on a desktop browser. However, when I view it on a mobile device browser (emulated iPhone 5 using Chromium), section 2 seems to overlap with section 1, as shown in the screenshot:
How can I get around this problem?
Just remove the height attribute from your section CSS and it will work.
Bootply Example
However, as #ChrisYongchu mentioned, the way you are currently formatting your HTML, there will be nothing responsive about your code. The sections will simply take up 100% of the width of the container at all screen sizes. One way to utilize Bootstrap correctly would be to have the content use 2 columns on large screen sizes and then stack on smaller screen sizes, the markup would look like this:
<section>
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ex suscipit laborum velit atque, eaque dolorum sequi, eligendi laudantium fuga quos dolorem officia sunt totam. Quidem aspernatur vero vitae laborum quaerat dolorum. Consequatur a tempora adipisci qui enim doloribus sequi voluptate, quidem itaque tenetur aut voluptas obcaecati adipisci architecto beatae aliquam? Nemo cumque sequi accusamus nesciunt obcaecati id blanditiis, neque laborum tenetur eveniet, rerum enim voluptatem voluptate itaque eos ut sint officiis molestiae?</p>
<p>Voluptate quis suscipit qui optio nulla unde veniam sed tempore itaque? Expedita optio amet, facere quia at consequatur reiciendis aperiam alias doloremque amet laudantium hic sunt, nulla voluptatem libero id veritatis molestiae ab in, totam dignissimos facere, accusantium voluptates mollitia quae iusto voluptas assumenda temporibus vel quod? Vero ipsa dolore impedit, animi laboriosam expedita similique impedit necessitatibus, repellat distinctio nobis amet voluptatem quae, expedita voluptas rerum?</p>
<p>Ratione aliquid deleniti maxime dicta, fugit incidunt quam omnis ad maiores, blanditiis modi repellat cumque ut nemo. Sapiente sequi sint, illum fugiat eum non deserunt totam doloremque officiis, alias fugiat asperiores doloremque laudantium numquam iste, tempore illum rem quidem.</p>
<p>Quam eum quia pariatur accusantium nesciunt, earum ducimus cupiditate doloribus voluptate fugiat reprehenderit esse obcaecati ex, corrupti dignissimos deserunt molestias tenetur minus, nam cum quaerat quidem, exercitationem iure ipsa vero neque quod iusto necessitatibus illo eos alias? Quae rem officiis accusantium ad expedita ratione modi tenetur reiciendis sint odio, eum animi voluptatem doloremque rem totam, sunt velit nobis blanditiis assumenda vel atque cupiditate nulla quo alias, sequi ullam nam deserunt eius labore nostrum hic tempore asperiores, dolorem repellendus expedita vel sit.</p>
</div>
<div class="col-lg-6">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Temporibus tempore dignissimos quaerat quo quisquam delectus commodi nesciunt sed.</p>
</div>
</div>
</div>
</section>
Notice how I only defined the col-lg size, if you do this, Bootstrap will assume anything below that size should use the full 12 columns by default, thus the sections will stack on mobile. I also removed one of the section elements and one of the container elements as they are not needed.
Bootply Example
Remove height: 100%; from your section style.
If you'd like to keep 100% height on your sections, parents need to be 100% height as well.
html, body {
position: relative;
height: 100%;
}
Then I'd suggest you to do following:
section {
position: relative;
height: 100%;
/* Define your preferrable minimum height, in case of any absolute elements */
min-height: 340px;
margin-bottom: 20px;
}
Working JS Fiddle...
Here's your big problem: you are using multiple containers. What I would suggest doing is using just one container (and removing the section tags) like this:
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Section 1</h1>
</div>
</div>
<div>
<div class="row">
<div class="col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ex suscipit laborum velit atque, eaque dolorum sequi, eligendi laudantium fuga quos dolorem officia sunt totam. Quidem aspernatur vero vitae laborum quaerat dolorum. Consequatur a tempora adipisci qui enim doloribus sequi voluptate, quidem itaque tenetur aut voluptas obcaecati adipisci architecto beatae aliquam? Nemo cumque sequi accusamus nesciunt obcaecati id blanditiis, neque laborum tenetur eveniet, rerum enim voluptatem voluptate itaque eos ut sint officiis molestiae?</p>
<p>Voluptate quis suscipit qui optio nulla unde veniam sed tempore itaque? Expedita optio amet, facere quia at consequatur reiciendis aperiam alias doloremque amet laudantium hic sunt, nulla voluptatem libero id veritatis molestiae ab in, totam dignissimos facere, accusantium voluptates mollitia quae iusto voluptas assumenda temporibus vel quod? Vero ipsa dolore impedit, animi laboriosam expedita similique impedit necessitatibus, repellat distinctio nobis amet voluptatem quae, expedita voluptas rerum?</p>
<p>Ratione aliquid deleniti maxime dicta, fugit incidunt quam omnis ad maiores, blanditiis modi repellat cumque ut nemo. Sapiente sequi sint, illum fugiat eum non deserunt totam doloremque officiis, alias fugiat asperiores doloremque laudantium numquam iste, tempore illum rem quidem.</p>
<p>Quam eum quia pariatur accusantium nesciunt, earum ducimus cupiditate doloribus voluptate fugiat reprehenderit esse obcaecati ex, corrupti dignissimos deserunt molestias tenetur minus, nam cum quaerat quidem, exercitationem iure ipsa vero neque quod iusto necessitatibus illo eos alias? Quae rem officiis accusantium ad expedita ratione modi tenetur reiciendis sint odio, eum animi voluptatem doloremque rem totam, sunt velit nobis blanditiis assumenda vel atque cupiditate nulla quo alias, sequi ullam nam deserunt eius labore nostrum hic tempore asperiores, dolorem repellendus expedita vel sit.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Temporibus tempore dignissimos quaerat quo quisquam delectus commodi nesciunt sed.</p>
</div>
</div>
</div>
</body>
Hopefully that helps!!!
section {
/*remove height: 100%*/
padding-top: 50px;
}
Is there any way to have a scrollable div in a page where all the other contents are fixed but that div is scrollable by the window scrollbar instead of it's own scroll?
Thanks in advance
If you know what the dimensions of the fixed content are, i.e. the offset from the edges of the window to the edges of the scrolling content, then really all you need to do is put margins on the scrolling content. Then the fixed content is displayed in the margins, as it were.
html, body {
height: 100%;
margin: 0;
color: #000
}
header {
display: block;
position: fixed;
top: 0;
padding: 0 1em;
line-height: 3;
width: 100%;
background: #FBB
}
nav {
display: block;
position: fixed;
left: 0;
top: 3em;
bottom: 3em;
padding: 1em;
width: 7em;
background: #BBF
}
aside {
display: block;
position: fixed;
right: 0;
top: 3em;
bottom: 3em;
padding: 1em;
width: 7em;
background: #BFF
}
main {
display: block;
margin: 3em 9em 3em 9em;
padding: 1em;
background: #FFB
}
footer {
display: block;
position: fixed;
bottom: 0;
padding: 0 1em;
line-height: 3;
width: 100%;
background: #BFB
}
<header>This is the fixed header</header>
<nav>And the fixed nav bar.<br />
Go to top<br />
Go to bottom
</nav>
<aside>And the fixed sidebar.
<br />With some content.</aside>
<main>This is the scrolling content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<br />At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<span id="bottom"></span>
</main>
<footer>And the fixed footer</footer>
I gave everything different colours to make it clear what the trick is, but you can give all the fixed containers the same background colour, naturally.
I'm trying to use column in css3 to divide the content newspaper. The problem is I can't mix 2 columns of 3 columns by h1.
Here is image I want :
I want it to support only -webkit- only. Also you can change the content to group of <p> and <h1>
here my code with the text example in the image : http://jsfiddle.net/mN2cg/
CSS :
body {
font-family: "Times New Roman", "Helvetica";
font-size: 16px;
padding: 20px;
margin: 0;
overflow-x: scroll;
}
#columns {
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-fill: auto;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-fill: auto;
column-count: 3;
column-gap: 20px;
column-fill: auto;
height: 300px;
}
h1 {
background: #ff6600;
margin: 0 0 20px 0;
}
p {
background: #ccc;
margin: 0 0 10px 0 !important;
}
HTML :
<body>
<div id="columns">
<h1>Dolore ad Corporis Eius Cicero Laudantium sit Minima</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos
dolores et quas molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum
quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil impedit
quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam
et aut officiis debitis aut rerum necessitatibus saepe eveniet ut
et voluptates repudiandae sint et molestiae non recusandae.
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
Thanks for help
may be this can help you
h1 {
background: #ff6600;
margin: 0 0 20px 0;
column-span:all;
-webkit-column-span:all;
}
http://www.w3schools.com/cssref/css3_pr_column-span.asp
The thing is that your using the column property on the div containing the heading and all the paragraphs, plus the two on the right are stacked vertically. so basically it Isn't possible to get the desired layout using just para columns .
see the fiddle link at the end. It's better to use divs for such a layout. At least in my opinion. here's the reworked html structure and the css
<body>
<div class="left-column" >
<h1>Cicero Laudantium sit Minima</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
<p style="margin-right:-5%;;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
</div>
<div class="right-column" >
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
</div>
and the css like this.
body {
font-family: "Times New Roman", "Helvetica";
font-size: 16px;
padding: 20px;
margin: 0;
overflow-x: scroll;
}
.left-column{ float:left; width:60%;}
.left-column h1 {background: #ff6600;
margin: 10px 10px 10px 0; padding:20px 10px; ;}
.left-column p {float:left; width:46%;
margin:5% 5% 5% 0;
background: #ccc;}
.right-column{float: left; width:40%;}
.right-column P {width:90%; margin:10px 5% 10% 5%;
background: #ccc;}
http://jsfiddle.net/mN2cg/2/