I am creating a two-column layout by having one div floating left (with a width of almost 50%) and another div floating right. Inside these divs I am displaying a textarea. This works fine in principle and nicely adjusts the width of the columns to the available width.
However, when someone uses the browser's textarea resizing function (e.g. in Firefox) to change the size of the textarea, the div does not adjust. The result of this is that the text area is resized, but extends outside the div (or just becomes cut off).
Can I fix this somehow?
MWE:
<div style="overflow: hidden;">
<div style="float: left; width: 40%; background: red; padding: 1em;">
<textarea style="width: 100%">left</textarea>
</div>
<div style="float: right; width: 40%; background: green; padding: 1em;">
<textarea style="width: 100%">right</textarea>
</div>
</div>
You can disable the horizontal resizing of text area
textarea {
resize: vertical; /* you can resize vertically, but not horizontal */
}
You can only permit the vertical resizing to avoid your problem.
CSS
textarea { resize:vertical; }
DEMO HERE
If you want to disble the resizing do this:
CSS
textarea { resize:none; }
If you want to have the resizing and expand the div you should use min-heightinstead width:
HTML
<div style="overflow: hidden;">
<div style="float: left; min-width: 40%; background: red; padding: 1em;">
<textarea style="width: 100%">left</textarea>
</div>
<div style="float: right; min-width: 40%; background: green; padding: 1em;">
<textarea style="width: 100%">right</textarea>
</div>
</div>
DEMO HERE
Related
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 5 years ago.
Newbie to everything.
I have two div tags, the first has a width of 80% and the second a width of 20%. 80%+20%=100% but the second div moves to the next line.
The objective is to use the whole line without moving to the second.
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border-style: dotted;
}
</style>
</head>
<body>
<div class="border" style="width: 80%;">thing</div>
<div class="border" style="width: 20%; float: left;">other thing</div>
</body>
</html>
Try this:
css code:
.table_formate {
display:flex;
width:100%
}
.border {
border:1px solid #ddd;
}
HTML:
<div class="table_formate">
<div class="border" style="width: 80%; float: left; background: #dd0d0d;">thing</div>
<div class="border" style="width: 20%; float: left; background: #4abdac;">other thing</div>
</div>
jsfiddle link
You need to consider your border with your width. The border adds to the width making the width value increase. You would have to reduce the width size for this to be possible
.border {
border-style: dotted;
}
<div class="border" style="width: 80%; float: left; background: #dd0d0d;">thing</div>
<div class="border" style="width: 20%; float: left; background: #4abdac;">other thing</div><br>
<div style="width: 80%; float: left; background: #dd0d0d;">thing</div>
<div style="width: 20%; float: left; background: #4abdac;">other thing</div><br>
<div class="border" style="width: 79%; float: left; background: #dd0d0d;">thing</div>
<div class="border" style="width: 19%; float: left; background: #4abdac;">other thing</div>
Try,
<div class="border" style="width: 80%; float: left;">thing</div>
<div class="border" style="width: 20%; float: left;">other thing</div>
You can use box-sizing:border-box; to keep border in the count of the width of element :
See below snippet
.border {
border-style: dotted;
}
* { box-sizing: border-box; -webkit-box-sizing: border-box; }
<div class="border" style="width: 80%; float: left; background: #dd0d0d;">thing</div>
<div class="border" style="width: 20%; float: left; background: #4abdac;">other thing</div><br>
What you have to keep in mind is that block level elements, such as your div, always extend to the left and right edge of the page. When you set a width, you are setting the width of the content, not the block context as it's called. To do what you wish, you would need to float, or otherwise reposition, the first div so it does not occcupy the full width.
Also keep in mind that border is outside the width of content. And you must keep in mind padding and margin. Margin is added to the body on almost all graphical browsers, though this doesn't play into your problem.
So, your width is set to 80% and 20% of the parent element. The parent element is the body so we're OK here but you have a border. That border makes the total width of your content extend beyond the body by 2px; one px for each side of the div elements.
If you remove the borders and float the first div, you will accomplish what you want.
As an alternative, you can leave the borders in and make one or both of your div elements slightly smaller to accommodate the border.
To answer your question in a comment:
div { width: calc(80% - 2px); }
Note the "2px" as it's one px for each side of the div element. Maintain the spaces in the formula for this to work.
EDIT: Just noticed that the width of "dotted" as a border is larger than 1px. You'll need to set the minus value in the formula to accommodate whatever the width of the border is.
The question sounds complex but here is HTML that illustrates it:
<div id="contained" style="overflow: hidden">
<div id="float-right" style="float: right; width: 100px">floated-right</div>
<div id="float-left" style="float: left; width: 200px">floated-left</div>
<div style="clear: both"></div>
</div>
If I resize #contained to less than 300px then #float-left jumps below it and is no longer visible.
Question is: How do I prevent #float-left from disappearing if I resize #contained to less than 300px? How do I make #float-right and #float-left "stick together" if #contained is less than 300px?
It is not possible to prevent #float-left from disappearing when the container #contained is resized to less than 300px - and has overflow:hidden and a fixed height (presumably) - because #float-left and #float-right have fixed widths of 100px and 200px. If you would like them to remain side by side you would need to give them percentage widths. You could also have them stack one on top of the other if you give the #container height: auto.
<div id="contained" style="overflow: hidden">
<div id="float-right" style="float: right; width: 33.3%">floated-right</div>
<div id="float-left" style="float: left; width: 66.6%">floated-left</div>
<div style="clear: both"></div>
</div>
You can use a media query to change the style when the page is below a certain width. Example:
body { margin: 0; padding: 0; }
#contained { overflow: hidden; background: #f8f8f8; }
#float-right { float: right; width: 200px; background: #ffc; }
#float-left { float: left; width: 300px; background: #ccf; }
#media (max-width: 500px) {
#float-right { width: 33.33%; }
#float-left { width: 66.66%; }
}
<div id="contained">
<div id="float-right">floated-right</div>
<div id="float-left">floated-left</div>
</div>
Note: You don't need a clearing element inside the container, as the overflow style will make it contain its children.
I'd like to lay out HTML divs relative to one another, like Android's RelativeLayout.
Any idea how to achieve it? Thanks.
EDIT: The question is a general one but I see people request a specific example so here's the one from the link. You can simplify the example layout requirement to be: Blue square from start to finish. Below it two squares: Red and Yellow. Yellow to the right of red till the end. Below the yellow, a green square aligned to the right. Overall 4 divs, laid out relative to one another.
You can put divs on the same 'line' by using the display property in CSS.
Use
display: inline;
or
display: inline-block;
'inline-block' means your div can be given height and width properties while 'inline' will just be the size of your content. In this case, you'll probably want to use inline-block so you can line up your divs.
Found a way using float and clear:
<!DOCTYPE html>
<html>
<body>
<div style="width: 100%; height: 50px; background-color: blue;"></div>
<div style="width: 60%; height: 50px; background-color: red; float: left"></div>
<div style="width: 40%; height: 50px; background-color: yellow; float: left"></div>
<div style="width: 40%; height: 50px; background-color: green; clear:left; float: right">
</body>
</html>
You can play with the code here.
* The purpose of clear:left is to keep the green in the next line - even when the sizes of the red and yellow get changed to pixels instead of percentage.
Like Android, in HTML you cannot directly define Linear or Relative Layout. But through CSS you can define whatever design you want.
For example, in your question you have asked four inputs to align in a particular format.
You can wrap all inputs in a div, and make it align using float property.
The layout is here.
Edit: Here is the layout with .div2_2 in px value.
You can achieve this layout using the following html and css.
HTML
<div class="parent">
<div class="div1">
<input type="text" placeholder="Reminder Name"/>
</div>
<div class="div2">
<div class="div2_1">
<input type="text" value="Wed, Jun 27, 2012"/>
</div>
<div class="div2_2">
<input type="text" value="8.00am"/>
</div>
</div>
<div class="div3">
<div class="div3_1">
<input type="button" value="Done"/>
</div>
</div>
</div>
CSS
div{
padding: 3px 0;
}
input {
width: 100%;
}
.parent{
width: 400px;
}
.div1, .div2, .div3{
width: 100%;
}
.div2{
display: inline-block;
}
.div2_1, .div2_2{
display: inline-block;
}
.div2_1{
width: 55%;
float: left;
}
.div2_2{
width: 44%;
float: right;
}
.div3_1{
width: 30%;
display: inline-block;
float: right;
}
I hope this will be helpful for you.
Check out this page to find out how to layout your webpage in a "Grid System"
getbootstrap.com/css
How i can center div elements horizontally, so when i change the width of the browser, the last div go down with css?
So:
---||||-||||-||||---
--------||||--------
When i write:
<div style="float: left; position: relative; left: 50%;">
<div style="float: left; position: relative; left: -50%;">
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
...
</div>
</div>
Then after a element go down, all div elements go to the left side.
I would recommend using display: inline-block on the elements and then using text-align: center on the container to handle the centering you want:
I cleaned up your HTML but here is the basic HTML formatting with a container class and multiple (as many as you want) block class DIVs:
<div class="container">
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
</div>
The CSS modifies the display settings of the blocks and the text-alignment of the container:
div.block {
display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */
width: 315px;
margin: 10px 0;
height: 340px;
}
div.container {
width: 100%;
text-align: center; /* this is the magic that centers the elements */
}
I put together a small demo that should help demonstrate this method: JSFIDDLE
Be Aware: a small 'quirk' exists with the display: inline-block CSS. it causes a small amount of space to occur between the elements. This can be removed multiple ways, my preferred methods being either using comments or wrapping the closing tags of the DIVs. (the issue is caused by the return/spaces between the elements in the HTML):
<div class="container">
<div class="block">Text</div><!--
--><div class="block">Text</div><!--
--><div class="block">Text</div>
</div>
<div class="container">
<div class="block">Text</div
><div class="block">Text</div
><div class="block">Text</div>
</div>
reference for the quirk behavior
Create a container <div> that is 100% of a given area. Then set each <div>'s width inside the container to be a % and float: left;. They'll stack next to each other until they do not fit and will break to the next line.
.container {
width: 100%;
}
.three {
width: 33%;
min-width: 225px;
float: left;
border: 1px solid black;
}
<div class="container">
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
</div>
Run the snippet.
You could use media queries to write different css code for different sizes:
Media Queries
I have this HTML code
<div style="display:inline" >
<div>
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
I got this result:
I need to change my code to get a result like this :
I need the two labels displayed in the same line and each div (parent to each label) having a width of 50 percent of the page's width.
How can i change my snipet to do that?
Thanks
Try something like this:
<div style="display:inline" >
<div style="float: left; width: 50%;">
<label>NOM:</label>
</div>
<div style="float: left; width: 50%;">
<label>Ben felten</label>
</div>
</div>
You need display inline for more than just the parent div.
div{
display:inline;
}
label{
display:inline;
}
http://jsfiddle.net/SVH5C/
add a class to your main div:
<div class="main">
<div >
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
and in your css:
.main div{width: 50%; float: left;}
Or if those inside divs are realy there just for the labels there's no need for them to exist and you can style the labels directly, like:
<div class="main">
<label>NOM:</label>
<label>Ben felten</label>
</div>
CSS:
.main label{display: block; width: 50%; float: left;}
HTML:
<div>
<div class="label-container">
<label>NOM:</label>
</div>
<div class="label-container">
<label >Ben felten</label>
</div>
<div class="labels-end"/>
</div>
CSS:
div.labels-end{
clear: both;
}
div.label-container{
float: left;
width: 50%;
}
And the fiddle http://jsfiddle.net/RsK5N/3/
Div "labels-end" is not mandatory if labels spread over the entire width like in this case.
Without extra clear: both styled div browser will try to put the latter content in the same line as your labels. So it works without this div but only because there is no more width available.
You can also use inline-blocks and table-cells as follows.
Using inline-blocks
<div class="ex1">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex1 {
border: 1px dashed gray;
width: auto; /* will take the width of parent (page) container */
}
div.ex1 label {
display: inline-block;
width: 50%;
background-color: beige;
overflow: auto;
vertical-align: top;
}
Using CSS table-cells
<div class="ex2">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex2 {
border: 1px dashed gray;
width: 100%; /* will take the width of parent (page) container */
display: table;
}
div.ex2 label {
display: table-cell;
width: 50%;
background-color: beige;
}
If you use inline blocks, you need to be careful about any white space between the two label elements since any white space will add to the width of the line and will cause the second label to wrap to a second line. Use vertical-align: top to get rid of the extra white space below the labels which arises because of the inline formatting.
The extra white space issue does not arise with table-cells. Use width: 100% on the table div to make it fill up the width of the parent container (auto gives a shrink-to-fit width).
See demo: http://jsfiddle.net/audetwebdesign/Nb24q/
Comment: You don't need to wrap the label elements in div unless you need them for some other reason.