How to stretch parent div to fit children div?
I tried to add element with clear: both; after content but it didn't work for me.
HTML:
<div id="wrapper">
<div class="left-menu">
</div>
<div class="right-bar">
<div class="right-content">
<div class="content">
<div class="content-wrapper">
<div class="content-body">
Here is content
</div
</div>
</div>
</div>
</div>
</div>
CSS:
.left-menu {
background-color: #0B0C0E;
width: 20%;
height: 100%;
float: left;
}
.right-bar {
background-color: #F0F0F0;
height: 100%;
width: 100%;
}
.right-content {
float: left;
width: 80%;
}
.right-content > .content {
padding: 21px 0 0 42px;
}
.right-content > .content > .content-wrapper {
width: 98%;
height: 70%;
}
.right-content > .content .content-body {
background-color: #FAFAFA;
padding: 20px;
font-size: 24px;
border: 1px solid #D0D0D0;
}
sandbox for test: http://roonce.com/en/room/SwZuEJYB
Thanks in advance.
Use "clear-fix" technique. http://css-tricks.com/snippets/css/clear-fix/
This will allow the parent div to be the appropriate size of the floated elements within. Note this works specifically on #wrapper. (http://jsbin.com/huqehuta/1/edit)
.clear-fix:after {
content: "";
display: table;
clear: both;
}
Related
I have two elements where one of them is floated to left and other is floated to right and its content is textarea element. Their width is set to 30% and 60%. It looks ok, but when I resize textarea, parent element resizes in strange way. Textarea goes beyond parent.
Here's a simple example:
<div class="wrapper">
<div class="left">
<label>Label</label>
</div>
<div class="right">
<textarea></textarea>
</div>
<div style="clear: both;">
</div>
</div>
.wrapper {
border: 3px double gray;
display: inline-block;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
JSFiddle
What is the reason of that strange behavior and what can I do to fix it without modifying HTML code?
Solution: 1
You can set max-width: 100% to textarea so that it will not go beyond the div
.wrapper {
border: 3px double gray;
display: inline-block;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
.right textarea {
max-width: 100%;
}
<div class="wrapper">
<div class="left">
<label>Label</label>
</div>
<div class="right">
<textarea></textarea>
</div>
<div style="clear: both;">
</div>
</div>
Solution: 2
You can set resize: none; to teaxtarea so that it can't be resized. You can add height and width of the textarea as per your requirement
.wrapper {
border: 3px double gray;
display: inline-block;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
.right textarea {
max-width: 100%;
resize: none;
}
<div class="wrapper">
<div class="left">
<label>Label</label>
</div>
<div class="right">
<textarea></textarea>
</div>
<div style="clear: both;">
</div>
</div>
https://jsfiddle.net/0Lq3ks4g/50/
.wrapper {
border: 3px double gray;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
Try removing display:inline-block from .wrapper. Then parent will also expand when textarea expands
I'm trying to force a div to fit the text inside. No matter what I have tried, there seems to be extra white space. Here is my code:
body {
background-color: #000;
}
.holding {
width: 500px;
background-color: red;
height: 500px;
padding: 40px 100px;
max-width: 400px;
width: fit-content;
}
.childone {
background-color: white;
display: inline;
padding: 20px;
float: left;
clear: both;
}
.clear {
clear: both;
}
.childtwo {
background-color: white;
display: inline-block;
float: left;
padding: 10px;
}
<body>
<div class="holding">
<div class="childone">This is the Title and I really the div to end here with.no.extra.white.space </div>
<div class="clear"></div>
<div class="childtwo">This is the next child div with a bund of stuff.</div>
</div>
</body>
Use word-break: break-all, like:
.childone {
word-break: break-all;
}
Have a look at the snippet below:
body {
background-color: #000;
}
.holding {
width: 500px;
background-color: red;
height: 500px;
padding: 40px 100px;
max-width: 400px;
width: fit-content;
}
.childone {
background-color: white;
display: inline;
padding: 20px;
float: left;
clear: both;
word-break: break-all;
}
.clear {
clear: both;
}
.childtwo {
background-color: white;
display: inline-block;
float: left;
padding: 10px;
}
<body>
<div class="holding">
<div class="childone">This is the Title and I really the div to end here with.no.extra.white.space </div>
<div class="clear"></div>
<div class="childtwo">This is the next child div with a bund of stuff.</div>
</div>
</body>
Hope this helps!
div { width: max-content; }
Support browsers: https://caniuse.com/#search=max-content
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
Or you can use this way (change display attribute):
div { display: table; }
I am trying to create a box with an image on the left and text (title, price & description) aligned on the right. The problem is, the text is always displayed outside the box. What am I doing wrong here?
.photo {
width: 100%
}
.menu__item {
width: 100%;
border: 1px solid #c4c4c4;
display: block;
}
.menu__item__photo {
width: 40%;
padding-right: 16px;
display: block;
}
.menu__item__info__photo {
width: 60%;
display: block;
float: right;
}
.menu__item__info__title {
float: left;
width: 78%;
}
.menu__item__info__price {
float: right;
width: 21%;
text-align: right;
}
<div class="menu__item">
<div class="menu__item__photo">
<img src="http://placehold.it/350x150" class="photo">
</div>
<div class="menu__item__info__photo">
<div class="menu__item__info__title">Product Title Here</div>
<div class="menu__item__info__price">$9.99</div>
<div class="menu__item__info__description">Description here..</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/pxanzefe/
You can float your left item too:
Float the .menu__item__photo item and add box-sizing to include the padding inside the 40% width.
Use a clearfix method on your container.
.photo {
width: 100%
}
.menu__item {
width: 100%;
border: 1px solid #c4c4c4;
display: block;
}
.menu__item:after {
content: "";
display: table;
clear: both;
}
.menu__item__photo {
width: 40%;
padding-right: 16px;
display: block;
float: left;
box-sizing: border-box;
}
.menu__item__info__photo {
width: 60%;
display: block;
float: right;
}
.menu__item__info__title {
float: left;
width: 78%;
}
.menu__item__info__price {
float: right;
width: 21%;
text-align: right;
}
<div class="menu__item">
<div class="menu__item__photo">
<img src="http://placehold.it/350x150" class="photo">
</div>
<div class="menu__item__info__photo">
<div class="menu__item__info__title">Product Title Here</div>
<div class="menu__item__info__price">$9.99</div>
<div class="menu__item__info__description">Description here..</div>
</div>
</div>
If you just want the text contained within the box, add overflow: auto; to the containing div:
.photo {
width: 100%
}
.menu__item {
width: 100%;
border: 1px solid #c4c4c4;
display: block;
overflow:auto;
}
.menu__item__photo {
width: 40%;
padding-right: 16px;
display: block;
}
.menu__item__info__photo {
width: 60%;
display: block;
float: right;
}
.menu__item__info__title {
float: left;
width: 78%;
}
.menu__item__info__price {
float: right;
width: 21%;
text-align: right;
}
<div class="menu__item">
<div class="menu__item__photo">
<img src="http://placehold.it/350x150" class="photo">
</div>
<div class="menu__item__info__photo">
<div class="menu__item__info__title">Product Title Here</div>
<div class="menu__item__info__price">$9.99</div>
<div class="menu__item__info__description">Description here..</div>
</div>
</div>
When you float elements they're removed from the flow of the document and adding the overflow rule restores the behavior you're after.
Hi I have been having a problem with coding my layout I want to have my sidebar stay the same with regardless of screen size, but I also need my content area to be fluid. The header stays at the top which is what I want the problem is the footer I need it to stay always at the bottom and the full width of the content area. If anyone can help it would be muchly appreciated.
Here is my code.
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
}
#left {
width: 20%;
height: 100%;
float: left;
background-color: red;
}
#right {
float: left;
width: 80%;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: 80%;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
Use inline-block over float:left to avoid problems with clearings, but when using inline-block better use vh over % to fill the viewport.
And to have a fixed sidebar, just give it a fixed width and use calc to calculate the remaining space.
you can do something like this:
Snippet
html,
body {
height: 100vh;
margin: 0;
}
#content {
width: 100vw;
font-size: 0; /* fix inline-block gap */
}
#content > div {
font-size: 16px; /* revert font-size 0 */
}
#left {
width: 150px;
height: 100vh;
display: inline-block;
vertical-align: top;
background-color: red;
}
#right {
display: inline-block;
width: calc(100vw - 150px);
height: 100vh;
background: green
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: calc(100vw - 150px);
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
Here's what you should do :
First, replace the float:left; with display: table-cell; for your #left and #right selectors.
Then, use display: table; for your #content selector.
Then, remove the width: 80%; of your #right and #right footer selectors
Add right : 0; to your #right footer selector
Finally, set the left of your footer and the width of your sidebar to the same fixed with and you're there.
The beauty of this approach, is that it also works on IE8 and other browsers that do not have support for calc().
A demo :
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
display: table;
}
#left {
width: 100px;
height: 100%;
display: table-cell;
background-color: red;
}
#right {
display: table-cell;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
right : 0;
left : 100px;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
See also this Fiddle.
I have a div element (1200px width) that contains 3 inner divs.
First and last ones have static sizes (150px and 200px). I want the second one to be centered between logo and buttons. The problem is I don't know how to center this div...
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
width: auto;
float: left;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
One approach would be to set the display of the .text element to inline-block (and remove float: left), then add text-align: center to the parent element in order to center it. Since the other elements are floated, text-align won't affect them, and it will only center the inline .text element.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
text-align: center;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
display: inline-block;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Alternatively, you could also add margin: auto to the .text element and then set display: flex on the parent element. In doing so, the .text element will be centered horizontally with equal space on each side. In doing so, you don't need to float the elements either (since they are flexbox items).
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display: flex;
}
.logo {
width: 150px;
height: 50px;
background-color: darkred;
}
.text {
margin: auto;
}
.buttons {
width: 200px;
height: 70px;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
The problem is that you're floating the centre column. Don't.
The proper way to do what you're doing is to put the left and right columns first, then the centre column won't have to float and you can simply use text-align.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
text-align:center;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="buttons"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
</div>
Try
.text {
width: auto;
float: left;
text-align: center;
}
Trivial with Flexbox:
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display:flex;
justify-content:space-between;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
background:#c0ffee
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Here's an (I think) more appropriate solution which centers the entire div and not only the text, using width:calc(100% - 350px);
https://jsfiddle.net/tyvfcbre/1/
.text {
display:inline-block;
width:calc(100% - 350px);
background:lightgrey;
}
Background is there to demonstrate the div position.