I am trying to add an image wrapped by the text into the about.md of hugo based theme (hugo-theme-casper). I am not really an expert of either CSS or HTML, but looking around on different tutorials I managed to create something. The page content looks like:
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.
<img clear="none" align="right" src="/images/cover.jpg" style="height:250px" >
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
The result is that the image gets wrapped by the text but it seems shifted too much towards the right:
I cannot find a way to move the figure towards the left in order to be more "centered" in the text. I imagine that there are some rules in the theme css file that is modifying the way align="right" is working, but this is just a random guess. Any help?
When considering image alignment, you can read "How to Align and float images with CSS"
aligned imaged can be centered, but the text will not wrap around them
floating image can have the text wrapped around them, but won't be centered
Hugo allows you to add a class that you can easily customize in your CSS:
{{% figure src="/image.png#floatleft" caption="blah blah" %}}
css:
img[src$='#floatleft']
{
float:left;
//etc. etc/
}
But that would not be enough to center and wrap an image in a text.
As seen in this Hugo example, wrapping would only apply to left/right floating images.
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>
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 3 years ago.
I am learning how to use grid. I have set the grid-column-gap and grid-row-gap both to 10px but, as you can see, the two gaps appear of different sizes. Why is that?
I have tried to add margin:0 to the p as I have read this suggestion from previous threads. When I do so the grid-column-gap and grid-row-gap appear of the same size but the pink color of the main container disappears, why is that? Here the link to codepen https://codepen.io/Alicinetto/pen/NVqqmo
.container {
background: pink;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
main>p {
background: #fff;
padding: 20px;
margin: 0;
}
<main class="container">
<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.</p>
<p>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,</p>
<p>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.</p>
</main>
That is because the <p> element has native top and bottom margins applied by the browser's default stylesheet. If you set margin: 0 on the <p> element then the issue will go away.
main>p {
background: #fff;
padding: 20px;
margin: 0;
}
If you want to retain some separation between the container and it's inner <p> elements, then set a 10px padding on .container:
.container {
background: pink;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
padding: 10px;
}
main>p {
background: #fff;
padding: 20px;
margin: 0;
}
<main class="container">
<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.</p>
<p>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,</p>
<p>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.</p>
</main>
The paragraphs have margin on the bottom. If you add
p {
margin: 0;
}
the row gaps are the same.
Trying to add a border to some divs but am having some trouble! The left and right side aren't showing up for some reason. Code is as follows, also on jsfiddle: https://jsfiddle.net/3owmdzz4/
CSS:
*{
padding : 0;
margin : 0;
border : 0;
}
body{
background-image: url('img/0x0E14.png');
background-repeat: repeat;
background-attachment: fixed;
cursor: url('cursor.cur'), auto;
}
.blended_grid{
display : table;
width : 791px;
overflow : auto;
margin : 50px auto 0 auto;
}
.menu{
background-image : url('img/menu.png');
float : left;
clear : none;
height : 54px;
width : 791px;
}
.left{
background-image : url('img/bg-left.png');
float : left;
clear : none;
height : auto;
width : 77px;
}
.center{
background-image : url('img/0x00C8.png');
float : left;
clear : none;
height : auto;
width : 637px;
}
.right{
background-image : url('img/bg-right.png');
background-repeat: repeat;
float : left;
clear : none;
height : auto;
width : 77px;
}
.footer{
background-image : url('img/footer.png');
float : left;
clear : none;
height : 68px;
width : 791px;
}
HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Page Title</title>
<meta name="description" content="Write some words to describe your html page">
</head>
<body>
<div class="blended_grid">
<div class="menu">
</div>
<div class="left"><img src="img/dragon-left.png">
</div>
<div class="center">
"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."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"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?"
"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."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"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?"
</div>
<div class="right"><img src="img/dragon-right.png">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Could someone please tell me what I did wrong? Thanks!!
After reviewing your code and your requirement, i have done changes in css as well as in html too.
Please check updated fiddle
I just used background on main container div .foo .
background: url('http://i.imgur.com/DKiJnsX.png') bottom left repeat-y, url('http://i.imgur.com/HInbtY0.png') bottom right repeat-y;
so if div's height will increase, both borders will also increase. Hope it will help. Let me know if you have any question. Thank you
My designer uses this technique in a lot of designs and I can't decide the best way of css'ing this so it's automagically fluid (as it's going into a cms)
Basically, when floating a 2column div structure I would like there to be a bottom border per div. I would put the border on a wrapping element but there needs to be a gap between the two divs (margin-right). The problem is that the two divs are different sizes depending on content. height:100% will not seem to do the trick (even when making the parent 100%). I need the two divs's borders to be level with each other.
Attached is some sample code pre any formatting css- only successful way I have been able to do this is by setting the height per container, which in this case will not work, needs to be fluid.
Thank you !!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>What's the best way?!</title>
<style type="text/css">
div.col50>div{width:45%; float:left; border-bottom:1px solid #000;}
div.col50>div+div{margin:0 0 0 5%;}
div.col50+div.col50{margin:50px 0 0;}
div.col50:before, div.col50:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
div.col50:after { clear: both; }
div.col50{zoom:1;}
</style>
</head>
<body>
<div class="col50">
<div>
<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>
<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>
</body>
</html>
Try to make 3 <div>'s:
Left <div> with float:left;width:45%;margin-right:5%;
Right <div> with float:right;width:50%;
Bottom <div> with clear:both;width:100%;
Inside bottom <div> you can create two <div>'s with border (floated left and right).