I would like to wrap the content of varying length text within a box. With the below code, the width of the box is adjusted for smaller length text. But the height doesn't vary and text is not wrapped inside the box.
.chatbox {
border: 1px solid black;
border-radius: 3.5em/5em;
padding: 2%;
max-width: 60%;
float: left;
height: auto;
white-space: nowrap;
}
<div class="chatbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo arcu, aliquet quis interdum sed, molestie iaculis turpis. Morbi rutrum molestie mauris id gravida. Curabitur libero tortor, tincidunt at facilisis vitae, euismod id urna. Proin sit amet
facilisis est. Vivamus id rutrum eros, in tempus mauris. Nunc nec velit tempus, varius neque sit amet, varius mi. Nullam ullamcorper lacus arcu, eu commodo magna consectetur sit amet.
</div>
Try this
.chatbox{
border:1px solid black;
border-radius:3.5em/5em;
padding:2em;
max-width:60%;
float:left;
}
You don't need height:auto and word-wrap, which create the problem. I changed the padding to be compatible with border-radius.
Change white-space:nowrap to white-space:normal , hope this will help you
.chatbox {
border: 1px solid black;
border-radius: 3.5em/5em;
padding: 2%;
max-width: 60%;
float: left;
height: auto;
white-space: normal;
}
<div class="chatbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo arcu, aliquet quis interdum sed, molestie iaculis turpis. Morbi rutrum molestie mauris id gravida. Curabitur libero tortor, tincidunt at facilisis vitae, euismod id urna. Proin sit amet
facilisis est. Vivamus id rutrum eros, in tempus mauris. Nunc nec velit tempus, varius neque sit amet, varius mi. Nullam ullamcorper lacus arcu, eu commodo magna consectetur sit amet.
</div>
just replace your css with below css:
.chatbox{
border:1px solid black;
border-radius:3.5em/5em;
padding:2%;
max-width:60%;
float:left;
height:auto;
word-wrap: break-word;
}
Just remove white-space: nowrap it works this way.
.chatbox{
border:1px solid black;
border-radius:3.5em/5em;
padding:2%;
max-width:60%;
height:auto;
float: left;
}
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
CSS Property Border-Color Not Working
(6 answers)
Closed 9 months ago.
I am having some trouble understanding why margin: 1rem is not applying to my footer element. When I modify the size, only the text content in the <p> for the article div and aside element are modified. There is no margin between the footer text and the background color on the top and bottom, only on the left and right. Could anyone tell me what's causing this? Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
clear: both;
background-color: aqua;
display: block;
border: black 10px;
box-sizing: border-box;
}
p {
margin: 1rem;
}
</style>
</head>
<body>
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
congue, justo orci volutpat justo, semper vestibulum mauris est mattis
mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
aliquam massa. Pellentesque maximus tortor ac est ultricies, id
sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
Suspendisse sagittis eros vitae urna convallis, sit amet venenati
</p>
</footer>
</section>
</body>
</html>
The margin is applied - your problem is just that you have declared a 10px border without declaring a border-style, so essentially it looks like the p-element's margin is overflowing, because there is an invisible border of 10px. Apply a border-style and you will see the margin:
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
background-color: aqua;
display: block;
border: black solid 10px;
box-sizing: border-box;
}
p {
margin: 1rem;
}
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis congue, justo orci volutpat justo, semper vestibulum mauris est mattis mi. Duis tincidunt enim congue elit egestas, ut ultrices
purus vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor aliquam massa. Pellentesque maximus tortor ac est ultricies, id sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam malesuada dolor quis ante tempus, eget posuere massa egestas. Integer feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta. Suspendisse sagittis eros vitae urna convallis,
sit amet venenati
</p>
</footer>
</section>
I believe that is margin collapse.
I can see the intent to set a black border on the parent element footer in the first place. But that probably isn't working, and border: black 10px solid; would do the trick. And the margin collapse would no longer occur in this case.
Please read following page to learn about the margin collapse.
What is Margin Collapse in CSS? And How to Avoid It
And, as the other answers pointed out, perhaps it is padding, not margin, that suits your purpose.
You need to give padding to footer
Changes I made
In BODY tag
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
IN FOOTER
padding: 2%;
You apply box-sizing then i think you like to use padding. I refactor your css a little bit.
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
background-color: aqua;
box-sizing: border-box;
padding: 10px;
}
p {
margin: 1rem;
}
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
congue, justo orci volutpat justo, semper vestibulum mauris est mattis
mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
aliquam massa. Pellentesque maximus tortor ac est ultricies, id
sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
Suspendisse sagittis eros vitae urna convallis, sit amet venenati
</p>
</footer>
</section>
How to stop a horizontal scrollbar from affecting the vertical align of the text inside a div? I want the text centered and the scrollbar can be under it.
Is it also possible to place the scrollbar on the underside of the outer div (without affecting its height) and affecting the scroll of the inner div with it?
.outer {
width: 50%;
padding: 30px;
background-color: #008000;
}
.inner {
border: 1px solid red;
height: 50px;
overflow: scroll;
white-space: nowrap;
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nulla ac leo ullamcorper tristique. Donec lobortis a dolor sit amet congue. Etiam nisl lectus, euismod id enim ac, pretium blandit lectus. Cras congue placerat purus in malesuada. In
ex dui, iaculis id nisi eget, fermentum condimentum ante. Etiam a facilisis justo, vitae auctor lacus. Duis at nisi sed lacus tincidunt accumsan at id lacus. Praesent at luctus velit, eget interdum turpis.
</div>
</div>
Screenshot
The red line is the middle and the text needs to be there, which isn't because it's centering the whole div including the scrollbar in it
You can vertically center your text easily with flex :
.inner {
display: flex;
align-items: center;
border: 1px solid red;
height: 50px;
overflow: scroll;
white-space: nowrap;
}
.text {
margin: auto;
}
<html>
<body>
<div class="outer">
<div class="inner">
<p class="text">Text here</p>
</div>
</div>
</body>
</html>
For your second question for the scrollbar outside the div i don't think you can do it, but maybe someone here have the solution :)
Add line-height. line-height = height.
.outer {
width: 50%;
padding: 30px;
background-color: #008000;
}
.inner {
border: 1px solid red;
height: 50px;
line-height: 50px;
overflow: scroll;
white-space: nowrap;
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nulla ac leo ullamcorper tristique. Donec lobortis a dolor sit amet congue. Etiam nisl lectus, euismod id enim ac, pretium blandit lectus. Cras congue placerat purus in malesuada. In
ex dui, iaculis id nisi eget, fermentum condimentum ante. Etiam a facilisis justo, vitae auctor lacus. Duis at nisi sed lacus tincidunt accumsan at id lacus. Praesent at luctus velit, eget interdum turpis.
</div>
</div>
I have a circle div and my text isn't inside it. By default it is slightly above and I can't pinpoint why. I have added margin to the top to force it inside the div but I am sure there is a better way to do this because my method only works for a certain amount of text.
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}
<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci,
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus,
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna,
a ornare ex blandit a.
</p>
</div>
This is what it looks like
But I want it to look more like this but without having to add margin to the top of the text inside the div.
Here's a version that allows for any size text inside, although of course the size of the surrounding <div> will have to be changed if the size of the content is vastly greater. I added a second example with a bit more text.
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: justify;
text-align-last: center;
position: relative;
}
div.description h1 {
margin: 0;
padding: 0;
}
div.description p {
padding: 3.5em;
position: absolute;
top: 50%;
max-width: 470px;
max-height: 470px;
transform: translate(0,-50%);
}
<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a.</p>
</div>
<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat.</p>
</div>
You should use css3 flexbox. Following css will make an element horizontally and vertically middle aligned:
div.description {
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
div.description {
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
padding: 25px;
}
<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci,
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus,
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna,
a ornare ex blandit a.
</p>
</div>
For old browser support you can use following css to make it middle aligned:
div.description {
display: table;
}
div.description div.text {
vertical-align: middle;
display: table-cell;
}
div.description {
display: table;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
padding: 25px;
}
div.description div.text {
vertical-align: middle;
display: table-cell;
}
<div class="description">
<div class="text">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci,
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus,
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna,
a ornare ex blandit a.
</p>
</div>
</div>
You can use the concept of padding:20px; to achieve the output you have expected
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
padding: 20px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}
<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci,
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus,
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna,
a ornare ex blandit a.
</p>
</div>
you can try this. giving a max-width to p element smaller than the circle so it will not exede beyond the circle.
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}
div.description p{
max-width: 450px;
margin: 0 auto;
}
<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a.
</p>
</div>
I am trying to implement the following:
You will see there is text and then a line to its side. I am trying to make the line remain the same distance from the text as the screen decreases in size. This works OK, but when the screen gets smaller the line goes into the 'Test Border' part.
See code below as to how I have implemented this. Perhaps I should be taking a different approach.
Also, a jsfiddle here for your convenience.
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: inline-block;
padding-bottom: 15px;
width: 8%;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: 90%;
}
<h3>Test Border</h3>
<div class="underline"></div>
You can display both blocks as table and specify first block fixed width (as it's only text that does not change).
.wrapper {
display: table;
width: 100%;
vertical-align: bottom;
padding-bottom: 15px;
table-layout: fixed;
}
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: table-cell;
width: 85px;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 100%;
position: relative;
top: -12px;
}
<div class="wrapper">
<h3>Test Border</h3>
<div class="underline"></div>
</div>
I'd probably use flex box like this.
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 10px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Test String</span>
<div class="line"></div>
</div>
This will make the title as wide as the longest unbroken work, and the border will fill up the rest of the space.
Here's what it looks like with paragraphs between each header (an almost real world example)
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 5px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Lorem ipsum dolor</span>
<div class="line"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis metus at semper laoreet. Vestibulum vitae lectus ut justo consequat dignissim et in eros. Duis aliquam, ipsum et imperdiet venenatis, ipsum augue scelerisque ante, eu lacinia dui metus
sed lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu risus a nibh vulputate consectetur. Phasellus id lectus tempor, cursus arcu ut, suscipit augue. Etiam aliquam lobortis semper. Vestibulum dui arcu, faucibus vel suscipit
sed, fermentum sed purus. Vivamus pharetra orci aliquam ligula imperdiet elementum a non tortor. Donec nisl enim, condimentum id nulla quis, vulputate interdum felis. Pellentesque molestie congue urna, eget ultricies est aliquet in. Aenean convallis
magna dolor, vitae facilisis nibh euismod et.
</p>
<div class="border">
<span class="string">Etiam quis molestie</span>
<div class="line"></div>
</div>
<p>
Etiam quis molestie libero. In vitae massa cursus, commodo lectus vel, vehicula felis. Nam venenatis tortor et diam faucibus, vel ullamcorper orci placerat. Mauris at aliquet nunc, quis eleifend turpis. Mauris ultricies at mi ac bibendum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nulla metus enim, volutpat ut magna sed, dignissim tincidunt lorem. Nam nec tempor urna. Nam eget quam elit. Pellentesque condimentum turpis consequat turpis rhoncus vestibulum. Curabitur efficitur dapibus
tortor ac bibendum. Donec risus nibh, dignissim vel sapien vel, fermentum scelerisque velit. Ut posuere finibus erat, nec bibendum nunc faucibus at.
</p>
<div class="border">
<span class="string">Phasellus sed orci</span>
<div class="line"></div>
</div>
<p>
Phasellus sed orci eget urna commodo luctus a sed felis. Aliquam erat volutpat. Quisque sit amet volutpat magna. Etiam vestibulum, velit sit amet efficitur consectetur, tortor velit consectetur velit, et facilisis ex dolor sit amet quam. Fusce tristique
lorem eget dapibus malesuada. Suspendisse iaculis est nec urna sollicitudin, tincidunt vehicula justo pellentesque. Morbi nulla lorem, tempus a interdum vel, fringilla ut elit. Vestibulum sed neque sed lorem viverra luctus. Suspendisse sapien ipsum,
ultrices vitae posuere eget, tristique sit amet augue. Nam suscipit, dolor et lacinia vulputate, erat nunc lacinia nibh, vel posuere nisl nunc eget enim. Vestibulum suscipit lorem risus, id feugiat sem molestie ac. Integer consectetur nunc sed lacinia
commodo. Quisque cursus purus nec dui euismod, nec porttitor nibh fermentum. Nunc tellus mauris, accumsan vitae tincidunt sit amet, ultricies in elit. Donec elementum libero ipsum, sit amet aliquam tortor volutpat eget. Pellentesque pretium dictum ligula.
</p>
<div class="border">
<span class="string">Fusce ultricies ante</span>
<div class="line"></div>
</div>
<p>
Fusce ultricies ante ut orci laoreet, in luctus quam eleifend. Integer nisl purus, pharetra sit amet ligula id, porta porta risus. Etiam nec varius risus, eget euismod risus. Vivamus pharetra purus vitae turpis ultrices ullamcorper. Proin vestibulum,
tortor id blandit pharetra, sapien augue dictum elit, a efficitur urna magna at lorem. Donec sollicitudin, purus sed pharetra iaculis, dolor mauris pretium est, in vestibulum massa odio vitae sapien. Curabitur scelerisque felis dui, non molestie nisl
viverra in. Integer tempor nec risus quis vulputate. Nulla facilisi. Pellentesque ipsum elit, lacinia et consectetur id, gravida ut arcu. Maecenas vestibulum faucibus rutrum. Duis at egestas purus. Proin ac congue nisl, id placerat turpis. Aenean ac
nisl at odio efficitur convallis sit amet quis ipsum. Mauris scelerisque aliquet libero, nec dapibus lectus.
</p>
I think the best solution is change the markup, because with your code the text in h3 tag could be bigger than your max-width (in fact, it is). Something like this:
.textline {
display: table;
}
h3 {
font-size: 26px;
color: #000 !important;
display: table-cell;
width: 9%;
margin-right: 1%;
vertical-align: bottom;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 90%;
position: relative;
top: -7px;
}
<div class="textline">
<h3>Test border</h3>
<div class="underline"></div>
</div>
When you use percentages you have to take into account the fixed measures of the other elements, width, margins, borders... Not the same 90% of a 1000px screen that one of 500px, the remaining space is less.
You can use calc to solve this issues:
h3 {
font-size: 26px;
color: #000 !important;
width: 95px;
display: inline-block;
padding-bottom: 15px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 100px);
}
<h3>Test Border</h3>
<div class="underline"></div>
You could try using a table display, with the text and line each having their own cell:
<div class="div-row">
<div class="div-cell"><h3>Test Border</h3></div>
<div class="div-cell underline"></div>
<div>
CSS:
.div-row {
display: table-row;
width: 100%;
}
.div-cell {
display: table-cell;
}
I haven't tested this, but the div containing the line should automatically shrink to the available width as your resize the browser window (or as you go from desktop to mobile).
If you want, you could also set a fixed width to the div containing the text.
You can try calc() property and it will work...
Check this fiddle here
What you have to do,
h3 {
font-size: 26px;
display: inline-block;
max-width:90px;
margin-right:10px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 104px);
}
Try the below CSS:
h3 {
font-size: 26px;
color: #000 !important;
display: inline-block;
padding-bottom: 15px;
}
.underline {
border-bottom: 1px solid #C6BCB6;
width: 90%;
}
Im wanting the container (purple border) to grow in size alongside the main content so i can place a border around it so it looks like the sidebar (blue border) is full height.
<div id="container">
<section id="mainContent">
<h1>title here</h1>
<img src="images/jayzmchg.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur
a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et,
cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac
ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis
venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet
ligula scelerisque hendrerit.</p>
</section>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<footer id="footer">
<p></p>
</footer>
Above is the html, the following is the css
#container { /* purple border */
height: 250px;
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
}
#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
}
#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
}
ive set the height at 250px for the container so you can see it, ive tried setting it as 100% but just doesnt show anything im guessing this is cause theres no content in it but how could i make it so it acts like if what is inside the mainContent is its height.
adding overflow:hidden to container causes this
Put a float:left; on #container.
OR
Put overflow:hidden; on #container to clear the internal floats.
Example fiddle: http://jsfiddle.net/3jNTv/
Chris Coyier has written a great post about it here:
http://css-tricks.com/all-about-floats/
Try set the height to heigh: 100%;?
Try this one, see live example:
link
height: auto !important;
I have added a class floClear and add a div. it will work fine.
CSS
#container { /* purple border */
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
}
#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
}
#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
}
.floClear
{
clear:both;
}
HTML
<div id="container">
<section id="mainContent">
<h1>title here</h1>
<img src="images/jayzmchg.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur
a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et,
cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac
ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis
venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet
ligula scelerisque hendrerit.</p>
</section>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="floClear"></div>
</div>
<footer id="footer">
<p>Test</p>
</footer>