I have text between 2 block float elements and I want to add an additional indentation to the right for a quote id element inside the p paragraph. The problem is that margin-left doesn't work next to a float element and if I use the position: relative method, like in the shown example, then the text will clip the right float block. Is there a way to move the quote text to the right without the clipping?
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
position: relative;
left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
Edit:
For an exact example you can look at en.wikipedia.org/wiki/Hercules at the line Tacitus records a special affinity of the Germanic peoples for Hercules. In chapter 3 of his Germania, Tacitus states: You can see that the indented text that follows is essentially between 2 floating images.
The margin is correctly applied.
The problem is that your block is before in your html and it you should be after.
So, for what you are trying to achieve it is better to use display:flex
So I restructure your html, by placing a "container" and applying the flex.
Then, I put all your p into a div and place the right block below.
As you added a left to your #quote you need to adjust width of it too.
So I could remove your float.
DEMO
#left-block{
height: 150px;
width:50px;
/*float: left;*/
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
/*float: right;*/
background-color: #000;
margin-left: 10px
}
#quote{
position: relative;
left: 30px;
width: calc(100% - 30px);
}
.d-flex{
display:flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="d-flex">
<div id="left-block"></div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?</p>
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
<p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</div>
<div id="right-block"></div>
</div>
</body>
</html>
You can use a margin, but the value has to be larger than the width of the floated elements, since the margin is measured from to side of the parent element, not taking the floated element into account:
(no need for relative position BTW)
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
margin: 0 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
So the solution that isn't perfect but works, is to simply add overflow: hidden in to the quote element. The explanation seems to be written here
https://stackoverflow.com/a/18718157/18429900
The only issue with this is that it doesn't move the text to the left once it goes lower than the block height as show in the example below.
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
overflow: hidden;
padding-top: 40px;
padding-left: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
Related
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
.content {
width: 200px;
height: 150px;
padding: 20px;
background: yellow;
overflow: scroll;
box-sizing: border-box;
}
http://jsfiddle.net/v6yjLdnp/
Why doesn't the padding-bottom work in this case when scrolling? And how do I make this possible?
I suppose you mean the padding at the bottom of the scrolled content. This seems to be a browser issue - see the comments. But with the following code it should work properly in all browsers.
Transfer some of the settings to the container, then it works as desired:
body {
margin: 0;
}
.container {
width: 200px;
height: 150px;
overflow: scroll;
}
.content {
padding: 20px;
background: yellow;
}
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
The problem is probably be caused by the scroll bars.
This is a workaround with using pseudo elements in css, but it might solve your problem:
.content::after { content: ''; display: block; width: 100%; height: 20px; }
EDIT: Remove the padding bottom of the content element to make it work in all browsers:
.content { padding-bottom: 0px; }
I have a content box in which I want a div box that floats to the left and paragraphs that flow around it. So far my HTML looks like this:
.content {
float: left;
padding: 20px;
width: 650px;
height: 500px;
background-color: #F5CF8E;
/* Yellowish */
}
.fake-image {
float: left;
width: 200px;
height: 200px;
border: 0.5px solid gray;
padding: 20px;
margin: 0 20px 20px 0;
}
<div class="content">
<div class="fake-image"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>
What I really don't get is why is the margin-bottom: 20px; of my .fake-image not working? The margin is bigger. Can anyone help?
Here an image of what I mean:
This space is not extra margin. It's the remainder of the height of the wrapping line
In other words, the line that breaks under the image may not break perfectly to match the exact spot where your margin ends unless your lines perfectly divide that space somehow. It would be unreasonable to try to control this for most situations, however, hypothetically you could accomplish a fix if it were completely static content, but I don't recommend trying to do this because you might be fighting an uphill battle.
To test this for yourself: remove all margins except for your bottom margin on your image and manipulate line-height and typography stylings to see how they play together and/or manipulate only the bottom margin on that image and/or the image height.
Whenever I have an issue like this, I add specificity to the related CSS. margin in this case. margin: 0 20px 20px 0; shorthand for margin-top:0; margin-right: 20px; margin-bottom:20px; margin-left:0;
Fix the bottom by knowing also what is around it.
Here I add a div around it and set it's background so you see where the image actually IS. Other space belongs to other elements.
Now, we have the ugly lime and red we can see what is what, adjust that image and paragraphs etc., then we can later remove those ugly CSS things.
.content {
float: left;
padding: 20px;
width: 650px;
height: 500px;
background-color: #F5CF8E;
/* Yellowish */
}
.fake-image {
float: left;
width: 200px;
height: 200px;
border: 0.5px solid gray;
padding:20px;
/* margin-top: 0;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px; */
margin: 0 20px 20px 0;
}
.outside-image{float: left;background-color:lime;}
p {border:1px solid red;}
<div class="content">
<div class="outside-image"><div class="fake-image"></div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>
I am trying to add a 10px margin between the boxes and retain their intended media query values. But when it's added, the third box is pushed to the second row, I believe it is adding more pixels to the width of the box but I don't know how to make it scale automatically.
* {
box-sizing: border-box;
}
.titles {
float:right;
border-left: solid;
border-bottom: solid;
padding: 5px 10px 5px 10px;
}
.borders {
border-style: solid;
float: left;
}
p {
margin:15px;
margin-top:35px;
}
#media (min-width: 992px) {
.p1 {
width:33.33%;
}
.p2 {
width:33.33%;
}
.p3 {
width:33.33%;
}
}
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name ="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="module2.css">
<title>Module2-Solution</title>
</head>
<body>
<h1>Module 2 Assignment</h1>
<div class="p1 borders">
<div class="titles">One</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p2 borders">
<div class="titles">Two</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p3 borders">
<div class="titles">Three</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
</body>
</html>
Assuming that you want some space between the boxes on a wide screen, all you need to do is decrease their widths a bit.
* {
box-sizing: border-box;
}
.titles {
float: right;
border-left: solid;
border-bottom: solid;
padding: 5px 10px 5px 10px;
}
.borders {
border-style: solid;
float: left;
}
p {
margin: 15px;
margin-top: 35px;
}
#media (min-width: 992px) {
.p1 {
width: calc(33.33% - 7px);
}
.p2 {
width: calc(33.33% - 7px);
margin: 0 10px;
}
.p3 {
width: calc(33.33% - 7px);
}
}
<h1>Module 2 Assignment</h1>
<div class="p1 borders">
<div class="titles">One</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p2 borders">
<div class="titles">Two</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p3 borders">
<div class="titles">Three</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
But it could be I'm misunderstanding your question; if so, let me know!
An overflow-x, overflow-y pen by CSS Tricks
Hey, does someone have an idea how it may be possible to make the image in this CSS (please use the Codepen link) overflow the box, while overflow-y: scroll is still applied?
<div class="box">
<img src="http://placehold.it/450x150" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Recusandae suscipit, autem magnam ab. Possimus perferendis
officiis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Recusandae suscipit, autem magnam ab. Possimus perferendis
officiis doloremque impedit quia quos labore optio quas cum
incidunt.Blanditiis dicta, sunt numquam quos.
</p>
</div>
.box {
border: 1px solid #222;
width: 300px;
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
Here's a way you can do it, albeit a very hacky one. I put position:absolute on the image, which makes it ignore the overflow properties. Then I added a placeholder, which will cover the space the image covers so the text won't get pushed up to where the image is.
.box {
border: 1px solid #222;
width: 300px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
img {
position: absolute;
top: 0;
}
.placeholder {
display: block;
height: 150px;
width: 450px;
}
<div class="box">
<div class="placeholder"></div>
<img src="http://placehold.it/450x150" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
</div>
Edit: I just noticed, that in your codepen there is an overflow-x: scroll; while in the question itself it says overflow-y: scroll;. Can you specify which one you mean and tell me if I understood you correctly?
Edit2: I corrected my code snippet to fit to the question.
Edit3: If possible, I recommend taking the image out of the container. This makes the scrollbar visible and also doesn't need any placeholder or additional wrapper of any sort:
.box {
border: 1px solid #222;
width: 300px;
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
}
.placeholder {
display: block;
height: 150px;
width: 450px;
}
<img src="http://placehold.it/450x150" alt="" />
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
</div>
I have below code. Weave is
http://liveweave.com/JVtNIk
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quia voluptatem sequi ad iure obcaecati assumenda omnis aperiam ullam cupiditate possimus at ab sint! Dicta quisquam rem sunt aliquid inventore?</div>
<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quas ipsum minus perspiciatis est quam sit blanditiis harum rem similique eligendi suscipit voluptas ex placeat magnam quos amet! Est ut.</div>
<!-- End your code here -->
</body>
</html>
CSS is
* {
padding: 0;
margin: 0;
}
.box1 {
position: relative;
display: inline-block;
background: grey;
width: 200px;
height: 200px;
margin: 10px;
}
.box2 {
position: relative;
display: inline;
}
Please help me understand the reason why the box2 content is not starting from the top but quite from below ? is there any specific reason for that ? I can solve it by adding float but i am just curious on this behavior.
Please someone help me understand.
Thanks in advance
You have this behavior because the baseline of the .box1 is its last line of text. The .box2 starts on the same line as this last line so that explain why it is quite at the bottom. Then the inline attribute makes it continuing under the .box1 like if .box2 was in a <p> tag.
Hope you understood my explaination.