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
Related
I have divs that i want to wrap to the next line when the browser window gets smaller. I also want margin to be put in between the divs so that there's a gap between them. The problem I'm having is that the margin on the centre divs causes the divs to wrap incorrectly if the browser is set to a specific size. At a certain size you have 2 divs underneath one div. See my screenshot below as an example and this fiddle: http://jsfiddle.net/uhh2jwe2/ (change the width of the window)
This really needs to be dynamic as it will be a framework solution for laying out differently sized divs. The parent div will be fluid similar to the example. Any help would be great
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
You can use media queries to alter the css on smaller screen.
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#media (max-width: 435px) {
#outer > div {
margin-right:auto;
margin-left:auto;
margin-bottom:15px;
float:none;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
Use Media query like this:
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
I would recommend a solution that extracts the grid-elements from the content-elements. Therefore you have a lot more control about your layout and you can be more flexible with content you want to place into it.
Use your .inner elements as grid-elements and wrap content inside them into .inner-content
Wrap all inners into a row to get rid of the outer-gutter
Give the .inner elements a percentage-width and a px-max-width. So the elments can take alwyay 33.33% of the avaiable width but never more then 150px.
I added some adjustments for small screens, so the .inner elements wrap below each other and take more then 33.33% of the .outer container width.
Inspect the code: http://jsfiddle.net/uhh2jwe2/5/
* {
box-sizing: border-box;
}
/* flexible outer container */
.outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: hidden;
background-color: red;
}
/* remove outer gutter */
.row {
margin: 0 -10px;
}
/* .inner will take care of the width */
.inner {
width: 33.33%;
max-width: 150px;
float: left;
padding: 0 10px;
}
/* .inner-content take care of the height */
.inner-content {
height: 150px;
color: #fff;
background: blue;
}
#media (max-width: 435px) {
/* this wraps .inner elements below each other and extends width */
.outer .inner {
padding: 10px 0;
width: 100%;
max-width: 100%;
float:none;
}
}
<div class="outer">
<div class="row">
<div class="inner">
<div class="inner-content">1</div>
</div>
<div class="inner">
<div class="inner-content">2</div>
</div>
<div class="inner">
<div class="inner-content">3</div>
</div>
</div>
</div>
I would suggest to use bootstrap's technique for that. Have padding on both sides of your inner elements, and negate it with negative margin on the container.
This will require more markup tough. While .row and .container could be merge on the same element, the background-color would overflow to the left because of the negative margin.
.container {
background-color: green;
width: 510px;
}
.row {
font-size: 0;
margin: 0 -15px;
}
.block {
font-size: 12px;
padding: 0 15px;
display: inline-block;
}
.content {
width: 150px;
height: 150px;
background-color: red;
}
<div class="container">
<div class="row">
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
</div>
</div>
in your example, the first two divs are 170px wide (150+20), and the third is 150px wide because it doesn't have a margin, thats the problem.
avoid #media if you mant it to be fully responsive and not jumping from 4 items a line to 1 item a linefor example.
you can solve your issue by simply adding a margin-right:20 to your last element, but it is better to to like so :
.inner1, .inner2, .inner3{
float: left;
width: 150px;
height: 150px;
margin: 2px 10px; //left & right sides to half of 20px
background-color: blue;
}
because it will split the margin to the two sides, making it more symetrical.
For laying out differently sized divs.
if all your divs can change size but stay equal, it will work, but if the first div is 70 and the 2nd and 3rd are 50, there will always be two divs on the bottom line at some point.
I think I've found the simplest solution to what I'm trying to do without having to use media queries. I simply added the right margin to all fields including the last field rather than adding it to every field except the final field.
I then wrap all the fields in another div and add a minus margin (the same size as the gaps) so that the fields will wrap when they hit the side of the container. Here's a fiddle with the solution: http://jsfiddle.net/rahg1ky3/
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
#inner {
margin-right: -20px;
}
.cont {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
<div id="outer">
<div id = "inner">
<div class="cont">1</div>
<div class="cont">2</div>
<div class="cont">3</div>
</div>
</div>
I'm trying to place 6 divs with different height on 3 columns.
I use float property for divs on the left and on the right and margin: 0 auto for central divs.
Using clear property I placed second row of divs under the first one, but I want each div is under the div with the same float option without blank space between them.
Instead they are aligned the lowest div.
Here's the fiddle: fiddle
div {
border: 1px solid red;
width: 30%;
}
.left {
float: left;
height: 200px;
}
.right {
float: right;
height: 100px;
}
.center {
margin: 0 auto;
height: 50px;
}
<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left" style="clear:left">left-bottom</div>
<div class="right" style="clear:right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>
Thanks for help,
Piero.
You can try this one.
Html Code
<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left">left-bottom</div>
<div class="clearfix"></div>
<div class="right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>
Css Code
.left, .right, .center {border: 1px solid red;width: 30%;margin:2px;}
.clearfix{clear:both;}
.left {float:left;}
.right { float:left;}
.center {float:left;}
check fiddle https://jsfiddle.net/Dhavalr/9cyq8tu9/
Put them in 3 columns/DIVs 33.33% wide which you float:
https://jsfiddle.net/8Lbc5pq7/4/
HTML:
<div class="column">
<div class="left">left-top</div>
<div class="left">left-bottom</div>
</div>
<div class="column">
<div class="center">center-top</div>
<div class="center">center-bottom</div>
</div>
<div class="column">
<div class="right">right-top</div>
<div class="right" style="clear:right">right-bottom</div>
</div>
CSS:
div {
border: 1px solid red;
width: 95%;
}
.column {
float: left;
border: none;
width: 33.33%;
}
.left {
float: left;
height: 200px;
}
.right {
float: right;
height: 100px;
}
.center {
margin: 0 auto;
height: 50px;
}
try using this style:
div {
border: 1px solid red;
width: 30%;
display:inline-block;
}
.left {
float: left;
height: 200px;
}
.center {
margin: 0 auto;
height: 50px;
}
Please try this code
<style>
div {
border: 1px solid gray;
width: 33.1%;
}
.left {
float: left;
height: 200px;
}
.right {
float: left;
height: 100px;
}
.center {
margin: 0 auto;
float:left;
height: 50px;
}
</style>
<div class="left">left-top</div>
<div class="center">center-top</div>
<div class="right">right-top</div>
<div style="clear:both;"></div>
<div class="left" style="clear:left;">left-bottom</div>
<div class="center">center-bottom</div>
<div class="right" style="clear:right;">right-bottom</div>
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.
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.
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;
}