Menu
I want to create 4 textareas in one row, each with its own title, this is the illustration of what I wanna do:
I've tried this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="float:left;">
<p>
title1<br />
<textarea cols="15" rows="15">
textarea1
</textarea><br />
title2<br />
<textarea cols="15" rows="15">textarea2</textarea>
</p>
</div>
</body>
</html>
Instead it creates 2 textareas in 2 rows, I want 4 textareas in one row and a title centered on each textarea. How do I do that?
954
to make it more perfect add a common class to each of the div and apply css like below:
Html
<div class="inline-div">
<p align="center">Title 1</p>
<textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
<div class="inline-div">
<p align="center">Title 2</p>
<textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
<div class="inline-div">
<p align="center">Title 3</p>
<textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
<div class="inline-div">
<p align="center">Title 4</p>
<textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
Css
.inline-div {
display:inline-block;
}
.inline-txtarea {
resize: none;
border : 2px solid red;
height:125px;
}
Fiddle Demo
188
This a cleaner solution imho http://jsfiddle.net/yoge56eg/
the idea behind this css its to wrap all the content inside of a <div> class in this case the class is named .textAreaColumn (the . before the name works to define class while if you use # you will be defining an ID which mean its gonna be use only by one element in the html. in this case we are using a class . with the dot cause we want to be able to use it in many cases, if we want another 4 grids in a different place in the same page, we can have them.
then from them we start getting deep in the structure of the CSS, if you see we have a .textAreaColumn div which mean that the will modify all children. And .textAreaColumn div span` mean that will target the div with class .textAreaColumn that have a div and that div contain a span. Look at the html and you will see how that make sense.
and inside of this declaration are only properties the modify these elements.
CSS
.textAreaColumn{
width:100%;
}
.textAreaColumn div{
float:left;
width:25%;
padding:10px;
box-sizing: border-box;
}
.textAreaColumn div span{
display:block;
text-align:center;
}
.textAreaColumn div textarea{
box-sizing: border-box;
width:100%;
border:3px solid red;
min-height:150px;
}
HTML
<div class="textAreaColumn">
<div>
<span>Title 1</span>
<textarea>Content goes here</textarea>
</div>
<div>
<span>Title 2</span>
<textarea>Content goes here</textarea>
</div>
<div>
<span>Title 3</span>
<textarea>Content goes here</textarea>
</div>
<div>
<span>Title 4</span>
<textarea>Content goes here</textarea>
</div>
</div>
---- EDIT ----
Exactly as you ask for:
http://jsfiddle.net/yoge56eg/3/
-- EDIT Update ---
http://jsfiddle.net/yoge56eg/4/ with <span> with text align center
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
