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;
}
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'm using Bootstrap right now and designing a web page that features an article with multiple images. The ones that float left work perfectly fine.
For the image to float on the right, I have tried:
Assigning the image the float-right class (simply doesn't work with no explanation)
Giving the text around the image a separate column (text does not wrap around image at bottom)
Assigning the order-1 and order-12 classes to their respective elements (fails without explanation) ("respective elements" meaning the first col div and the tag afterwards containing the text)
And this is what my code looks like:
<div class="row">
<div class="col-lg-5 col-md-4 col-sm-12">
<img src="resources/pic.jpg" width="100%" />
<p>
caption for photo here
</p>
</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.
</p>
</div>
In my opinion CSS shape-outside is perfect for this kinda layout, unfortunately, it's not 100% ready yet, but we can try another way.
float: left; OR float: right; whatever you use for the image-holder element or the image itself, always put the image or image holder BEFORE the text (or the text-holder element).
Now, you HAVE TO use the float (left or right) ONLY in the image or image-holder, NOT in the text or text-holder. See the snippet below for a better understanding-
img {max-width: 100%}
.the_article {
width: 500px;
margin: 30px auto;
}
.img-right {
width: 300px;
float: right;
margin: 0 15px 0;
}
.img-left {
width: 300px;
float: left;
margin: 0 15px 0;
}
<div class="the_article">
<figure class="img-right">
<img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
</figure>
<section>
<h2 style="text-align: right;">Lorem ipsum dolor sit amet.</h2>
<p style="text-align: right;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim a nihil velit exercitationem adipisci hic? Praesentium quisquam odit earum eaque deserunt saepe repellat fugiat consequatur sint eveniet perspiciatis libero dolorem numquam commodi, rerum corporis, facere, similique consectetur itaque error! Eveniet qui ab odit ipsam! Magnam excepturi saepe quasi alias recusandae aliquid numquam odio nihil, natus reprehenderit deleniti. Accusamus maxime eum nihil ipsa dolorem? Modi, nihil! Rerum maxime fugiat, nemo doloremque sunt illum iusto molestiae, incidunt ad nulla quos dignissimos iure modi veritatis deserunt nisi. Dolorum fuga deserunt voluptates nisi officia consectetur et asperiores quam minus nulla odit veniam laborum repudiandae culpa, impedit, perferendis totam voluptate tenetur esse quo libero exercitationem consequatur reprehenderit quae. Eum in exercitationem odio et. Nam facere eos necessitatibus ad, nisi cum quidem, in maxime inventore nulla soluta ipsa assumenda reprehenderit, veritatis modi dolorem laborum. Fugiat sequi labore eligendi consequuntur perspiciatis accusamus? Tempora obcaecati inventore similique sed.</p>
</section>
<figure class="img-left">
<img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
</figure>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim a nihil velit exercitationem adipisci hic? Praesentium quisquam odit earum eaque deserunt saepe repellat fugiat consequatur sint eveniet perspiciatis libero dolorem numquam commodi, rerum corporis, facere, similique consectetur itaque error! Eveniet qui ab odit ipsam! Magnam excepturi saepe quasi alias recusandae aliquid numquam odio nihil, natus reprehenderit deleniti. Accusamus maxime eum nihil ipsa dolorem? Modi, nihil! Rerum maxime fugiat, nemo doloremque sunt illum iusto molestiae, incidunt ad nulla quos dignissimos iure modi veritatis deserunt nisi. Dolorum fuga deserunt voluptates nisi officia consectetur et asperiores quam minus nulla odit veniam laborum repudiandae culpa, impedit, perferendis totam voluptate tenetur esse quo libero exercitationem consequatur reprehenderit quae. Eum in exercitationem odio et. Nam facere eos necessitatibus ad, nisi cum quidem, in maxime inventore nulla soluta ipsa assumenda reprehenderit, veritatis modi dolorem laborum. Fugiat sequi labore eligendi consequuntur perspiciatis accusamus? Tempora obcaecati inventore similique sed.</p>
</section>
</div>
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/
I have a blog type format with text and images with captions below them. My images are varying widths with long captions. I'd like the caption to wrap below the image with the image and caption centered on the screen. How can I accomplish this with HTML and CSS?
(My friend asked me this, so I'll answer it below since he spent 4 hours and couldn't find the solution online).
display:table works fine too:
.image-caption-container {
display:table;
width:1%;
margin:auto;
}
div class="container"> 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?
<div class="image-caption-container">
<div class="image-caption">
<img src="http://lorempixel.com/320/320" />
<div>
<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>
</div>
</div>
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?
</div>
This solution requires flex. I'm not sure of any other method to get the same result.
HTML:
<div class="container">
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?
<div class="image-caption-container">
<div class="image-caption">
<img src="http://i.imgur.com/YJYNTno.jpg">
<div>
<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>
</div>
</div>
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?
</div>
CSS:
.image-caption-container
{
text-align: center;
}
.image-caption
{
display: inline-flex;
flex-flow: column nowrap;
}
img
{
flex: 0 0 auto;
display: block;
width: 300px;
height: 300px;
}
.image-caption > div
{
flex: 0 0 auto;
display: flex;
flex-flow: row wrap;
}
p
{
flex: 1 1 0px;
width: 0;
text-align: left;
}
JSFiddle:
https://jsfiddle.net/r58wz601/6/
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/