One is a header, another one is a textarea. If I don't use "display: inline-block" it puts them on 2 separate lines and the textarea properly fills to the width of the window and resizes if the window size changes. However, I want them to be inline but when I add the "display: inline-block", the textarea no longer fills to the width of the page.
Here is the code that I currently have.
<div style="display: inline-block" id="element1">
<h4>Description</h4>
</div>
<div style="display: inline-block; vertical-align: text-top;" id="element2">
<textarea rows="4" cols="50" readonly="readonly" style="width:100%">body</textarea>
</div>
This is a screenshot of what it produces.
Current Code Screenshot
Any help would be appreciated. Thanks.
Here I added a wrapper having display: flex and set the 2:nd child (last div) to flex: 1, which makes it fill the remaining space.
.wrapper {
display: flex;
}
.wrapper div:first-child {
font-weight: bold;
}
.wrapper div:last-child {
flex: 1;
padding-left: 5px;
}
.wrapper div:last-child textarea {
width: 100%;
}
<div class="wrapper">
<div id="element1">
Description
</div>
<div id="element2">
<textarea rows="4" readonly="readonly">body</textarea>
</div>
</div>
And if the div's were there only as an attempt to align them, you can drop them all together
.wrapper {
display: flex;
}
.wrapper span {
font-weight: bold;
}
.wrapper textarea {
flex: 1;
margin-left: 5px;
}
<div class="wrapper">
<span>Description</span>
<textarea rows="4" readonly="readonly">body</textarea>
</div>
Delete your header and div,
Then add external css to your textarea
div{
display:block;
margin:auto;
position:static;
}
textarea{
box-sizing:border-box;
display:block;
margin:auto;
width:100%;
}
textarea::before{
content:"Description";
vertical-align:top;
}
Related
Sorry for the title, this is hard to explain in one sentence. Basically, I have a div container with two divs: 1 image that is float:left(ed) and another one with text. Here is what it looks like:
<div id="container">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage">
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
And here is a fiddle of what I am doing:
http://jsfiddle.net/qMQL5/880/
I want to add padding to the p part of the div with the text. As you see, I added margin-left:50px to #second p but it doesn't do anything. Basically, I want to "indent" the text "First Person Shooter" but I am having trouble doing this. Any ideas?
Update:
This is the result of your actual code now:
So, as you can see it is applying, but you have to know a few things:
img tag is an inline element
The IMG element embeds an image in the current document at the
location of the element's definition. The IMG element has no content;
it is usually replaced inline by the image designated by the src
attribute, the exception being for left or right-aligned images that
are "floated" out of line.
since you are floating the img tag it will start behaving like an inline-block element
Floating an inline or block level element will make the element behave
like an inline-block element (from here).
So, therefore, there is a few solutions to fix this issue:
Solution #1
(a quick fix [as you can see by adding a border to your #container]- I would advise to read the other solutions below)
only using you existing HTML markup and CSS:(which will make both <h1> and <p> indented)
make your img an block element by applying display:block (optional - to fix gap below img tag)
removing margin-left from p and adding margin-right to img
#container {
border:1px solid red
}
#gameImage {
width: 100px;
float: left;
height: auto;
display:block; /*new - optional*/
margin-right:10px /*new*/
}
#second {
background-color: green;
}
<div id="container">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #2
Since you are using float already, let's go with clearfix
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
#container {
background-color: green;
border:1px solid red;
}
#second {
float:left;
/* background-color: green; /*choose what block will have the background*/ }
#gameImage {
width: 100px;
float: left;
height: auto;
}
#second > p {
padding-left: 10px;
box-sizing: border-box;
<div id="container" class="clearfix">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #3
dropping the floats and using display:table/table-cell
#container {
display:table;
width:100%;
background-color:green;
border:1px solid red;
}
#container > div {
display:table-cell;
vertical-align:top;
}
#container > div:first-child, #container > div > img {
width:100px
}
#container > div > img {
display:block
}
#container > #second > p {
padding-left:10px
}
<div id="container">
<div>
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
</div>
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #4
using inline-block
#container {
width: 100%;
background-color: green;
font-size: 0;/* fix for inline-block elements gaps*/
border:1px solid red;
}
#container > div {
display: inline-block;
vertical-align: top;
font-size: 16px /* fix for inline-block elements gaps*/
}
#container > div:first-child,
#container > div > img {
width: 100px
}
#container > div > img {
display: block
}
#container > #second > p {
padding-left: 10px
}
<div id="container">
<div>
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
</div>
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
NOTE:
You may want to take a look at some articles regarding floats, here and here
Your margin on #second must be as large as your image (100px) + the padding you want. Try with margin-left: 150px you will see.
Just use the space well with giving width to each element. You can give width as px or in % . You can try this
#second {
background-color: green;
float:left;
width:80%;
}
The non-floating element actually takes the entire width of the frame.
img {
float: left;
opacity: .75;
}
div {
background: aqua;
padding-left: 50px; /*nothing happens visually*/
}
<img src="http://lorempixel.com/150/150" />
<div>Hello</div>
To fix it you could simply set overflow:auto on it.
img {
float: left;
opacity: .75;
}
div {
background: aqua;
overflow: auto;
padding-left: 50px;
}
<img src="http://lorempixel.com/150/150" />
<div>Hello</div>
I'm not exactly sure what you're trying to achieve with the green box, but If you're just looking to keep things as they are, you need to make the <p> element and inline-block element so that it respects the floating <img> element and doesn't just wrap around it.
#second p {
display: inline-block;
margin-left: 10px;
}
http://jsfiddle.net/0za19kcx/
Consider the following.
2 DIVS - the left one of known width, the right one of unknown width.
We can make the right-hand side fill the remaining space, however if I exchange the right-hand DIV to a textbox, it then does not fill the space, but wraps below the left-hand div.
Here's a fiddle: example
<div>
<div id="left">
left
</div>
<input type="textbox" id="right">
right
</input>
</div>
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
I'm confused - any advice?
Still not behaving as it should!
New fiddle here: updated fiddle
JSFiddle
Inputs are inline bydefault and only the
Block level elements can aquire the remaining space left after a floating element. So you should change the display property for input to block i.e. display:block
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
display:block;
background-color:#00FF00;
}
<div>
<div id="left">
left
</div>
<input type="textbox" value="right" id="right"/>
</div>
EDIT: http://jsfiddle.net/naeemshaikh27/MHeqG/1522/ using Calc.
Using Calc
If You wanted to set the width of only a single element, you may want to look at the calc() option.
Something like:
width: calc(100% - width px);
in which could be incorporated into most projects nowadays, as you can see from its browser support.
You could also make use of the auto width:
.secondElement{
width:auto;
}
to fill the space left
Have a look here...
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
width: 50%;
background: blue;
}
input {
width: 50%;
display: inline-block;
}
.fix {
border: none;
background: gray;
}
.now {
width: 49.5%;
}
.nowNew {
width: auto;
}
<div>Div on left</div>
<input type="text" placeholder="text here" />
<br/>Notice the lengths aren't the same? Yet both are defined as 50%?
<br/><br/>
<br/>That's due to the border around the input!
<br/><br/><br/>
<div>Div on left</div><input class="fix" type="text" placeholder="text here" />
<br/><br/>
<br/>To fix 'stuff' like this, I feel the general rule in web dev. is to aim to make it 99.9% instead:
<br/><br/><br/>
<div class="now">Div on left</div><input class="now" type="text" placeholder="text here" />
<br/><br/>
<br/>Or make the input width auto:
<br/><br/><br/>
<div>Div on left</div>
<input class="nowNew" type="text" placeholder="text here" />
You can accomplish this using display: table and display: table-cell.
JSFIDDLE
HTML:
<div class="container">
<div id="left">
left
</div>
<input type="textbox" value="right" id="right" />
</div>
CSS:
#left {
display: table-cell;
width: 180px;
background-color:#ff0000;
}
#right {
display: table-cell;
width: 100%;
background-color:#00FF00;
}
.container {
display: table;
width: 100%;
}
On my site, I have a div set to display: table. Inside that another div with display: table-row. Inside that 2 divs set to display: table-cell. On the first(left) table-cell div, I am trying to center a div. The only way that div will center is if I stick a div above it with enough content to fill the entire div.
Here is my HTML (with a lot of ugly non-breaking spaces):
<section class="main-content">
<div class="row">
<section class="cell leftSide">
<section class="mainWrap">
<div class="clear-fix"></div>
<div class="paddingWrap">
<div class="widthFiller">
</div>
<div class="sitemap">
<hgroup class="title">
<h1>#Html.MvcSiteMap().SiteMapTitle()</h1>
</hgroup>
#Html.MvcSiteMap().SiteMap()
</div>
</div>
</section>
</section>
</div>
And my relevant CSS:
.main-content {
display: table;
width: 100%;
}
.main-content .row {
display: table-row;
}
.main-content .cell {
display: table-cell;
vertical-align: top;
}
section.mainWrap {
display: table-cell;
font-size: 1.2em;
margin-top: -34px;
}
.paddingWrap {
padding: 15px 70px;
}
.mainWrap .sitemap {
border: 2px solid #aaaaaa;
display: table;
margin: 20px auto;
padding: 10px;
text-align: center;
}
I need that sitemap div to be centered in the mainWrap table cell. If I remove the "widthFiller" div with all the spaces, the sitemap div goes back to the left side.
And here is my live page that you can view the issue: http://clubschoicefundraising.com/about/site-map
I believe to have a display:table-cell you need it inside a table.
so around the div "mainWrap" put another div with the style display:table and width:100%
so:
<div class="mainWrapWrapper" style="display:table;width:100%">
</div class="mainWrap">
.....
<div>
</div>
currently the issue is that mainWrap will not obey any width css because it is not inside a table div, and when you check it's width it's not 100% so your margin:0px auto on the sitemap will not do anything
Edit: also, you can remove width filler
How to make all inputs with the same width 100%?
if I set width 100% then input will be break on new line:
div > input {
width: 100%;
}
HTML:
<div class="wrapper">
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
</div>
CSS:
.wrapper label {
float: left;
margin-right: 10px;
}
.wrapper div {
margin-bottom: 15px;
}
The desired result (JSFiddle):
.wrapper input {
width: 90%;
}
You cannot make it 100% without a new line because the Label will take some space of the screen. Remaining portion you can allot for the text fields.
You can do something like this: DEMO
Just remove the float statement, and make both the label and input display: inline-block.
.wrapper div {
margin-bottom: 15px;
}
div > input, div > label {
display: inline-block;
}
div > input {
width: 77%;
}
div > label {
width: 20%;
}
You can change the width of the input fields and/or the labels, but I think width: 77% is the highest value possible for the input fields (with the width of the labels set to 20%) to still display inline.
EDIT:
Do note that using CSS selectors based on HTML tagnames is not the ideal way of doing this. A better way is to give all labels and inputs a class (f.e. class="lbl" and class="inp" respectively), and selecting those, like underneath:
...
.lbl, .inp {
display: inline-block;
}
...
<pre>
.wrapper{width:100%; display:block}
.wrapper lable{width:30%; display:inline-block; position:relative}
.wrapper input{width:70%; display:inline-block; position:relative}
</pre>
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.