If anyone can suggest a better place than stackoverflow for css questions please let me know.
I have an outer div with background and border and then I need to have two columns within the colored box. Some reason when I place the floating divs inside the outer div, the outer div does not grow.
Here is my HTML:
<div class="tip_box">
<h3>Send</h3>
<hr />
<form id="email_form">
<div class="three-columns">
<div class="contact_form_input">
<h6>Your Name</h6>
<input type="text" name="name_text_box" class="form_input" id="name_text_box" />
</div>
<div class="contact_form_input">
<h6>Your Email</h6>
<input type="text" name="email_text_box" class="form_input" id="email_text_box" />
</div>
</div>
<div class="three-columns">
<div class="contact_form_input">
<h6>Recipient Name</h6>
<input type="text" name="name_text_box" class="form_input" id="Text1" />
</div>
<div class="contact_form_input">
<h6>Recipient Email</h6>
<input type="text" name="email_text_box" class="form_input" id="Text2" />
</div>
</div>
</form>
</div>
<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>
Here is my CSS:
.three-columns {
width: 290px;
float: left;
margin-right: 45px;
}
.tip_box {
padding: 20px;
margin: 20px 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 10px;
border-radius: 7px;
padding-left: 55px;
background: #eee;
font-style:italic;
background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px;
border: 1px solid #b7db58;
color: #5d791b;
}
Screenshot:
http://dl.dropbox.com/u/2127038/cssissue.png
Non-float blocks containing float blocks will not automatically expand, since float blocks are taken outside the normal flow (or at least specially outside the flow). One way to correct that is to specify the overflow property to hidden or auto.
.tip-box { overflow: auto; }
See quirksmode for more.
Add following HTML after <div class="tip_box"></div>:
<div class="clear"></div>
Here is the CSS:
.clear{
clear:both;
}
It will surely work.
.tip_box { overflow:hidden; zoom:1; }
this establishes new block formatting context in ie7+ and other browsers, triggers haslayout in ie6 to contain floats
You're going to need what is commonly known as a clearfix. In this case a overflow: hidden on the containing element will do - see: http://www.jsfiddle.net/yijiang/zuNwH/2
.tip_box {
overflow: hidden;
}
As an aside, you might also want to use label elements instead of h6 to markup labels for your form elements, and use a list instead of individual divs for containing each label - input pair, and reduce the amount of class attribute you use by relying on more complex selectors for your CSS file.
<li>
<label for="recipient_email">Recipient Email</label>
<input type="text" name="email_text_box" id="recipient_email" />
</li>
In this case I wouldn't float the divs left, I would make them display: inline or inline-block.
Your 3 columns will turn into 2 columns, then 1 column if the browser window shrinks.
Related
Given a CSS rule of letter-spacing: 16px;, I notice that the characters are left-aligned within their "box", and make the cursor jump ahead to the far right, as if I added an extra space after the character.
Is it possible to use letter-spacing, but having the characters horizontally aligned within their new extended boundaries?
It's not possible. The reason is, this will act as a padding / margin but not like a position. But yeah, if you want something like that, you can use inline-flex and use order to reorder.
p {display: inline-flex;}
p span {padding: 3px;}
p span.second {order: 1;}
<p>
<span class="first">first</span>
<span class="second">second</span>
<span class="third">third</span>
</p>
This is just a POC. Please feel free to take it from here.
As have been said, letter-spacing does not have a mean to position the character in the unit, more precisely really just adds "tracking".
From your comment it is apparent what you want to get, and it is kinda achievable, provided you can split your input to multiple one-character ones:
div {
border: 1px solid black;
overflow: hidden;
float: left;
clear: both;
}
input {
border: none;
display: block;
float: left;
width: 20px; /* mimics letter-spacing*/
text-align: center;
}
<div>
<input name="pin1[]" maxlength=1 oninput="this.nextElementSibling.select()" value="m">
<input name="pin1[]" maxlength=1 oninput="this.nextElementSibling.select()" value="i">
<input name="pin1[]" maxlength=1 value="m">
</div>
<div>
<input name="pin2[]" maxlength=1 oninput="this.nextElementSibling.select()" value="i">
<input name="pin2[]" maxlength=1 oninput="this.nextElementSibling.select()" value="m">
<input name="pin2[]" maxlength=1 value="i">
</div>
Currently the page is just two divs sitting side by side inside a containing section. I had two trailing <br> tags on qtr_calc, which were pushing down sem_calc. Shouldn't qtr_calc be able to have as many newlines at the bottom as I like without affecting sem_calc? If not, is there a workaround?
Somebody had a similar issue here, but there no explanation of why this is able to occur and the answer that helped them does not help me.
The divs' html:
<section id="content">
<div id="qtr_calc">
<label for="qtr_cred_hrs">Quarter class credit hours:</label><br />
<input type="text" id="qtr_cred_hours" /><br /><br />
<label for="qtr_grade">Letter grade:</label><br />
<input type="text" id="qtr_grade" /></div>
</div>
<div id="sem_calc">
<label for="sem_cred_hrs">Semester class credit hours:</label><br />
<input type="text" id="sem_cred_hours" /><br /><br />
<label for="sem_grade">Letter grade:</label><br />
<input type="text" id="sem_grade" /></div>
</div>
</section>
The divs' CSS:
#qtr_calc {
float: left;
margin: 3em;
padding: 2em;
border: 1px double #F2F2F2; /* inside border */
outline: 1px solid #BFBFBF; /* outside border */
}
#sem_calc {
float: left;
top: 0;
margin: 3em;
padding: 2em;
border: 1px double #F2F2F2; /* inside border */
outline: 1px solid #BFBFBF; /* outside border */
}
And here's a pastebin with the rest of the page, in case it helps somehow.
You have an extra closing div tag here:
<input type="text" id="qtr_grade" /></div>
Demo
Remove extra closing Div's and top:0; and try to give them width say 20%. That should solve you problem.
I am trying to align the input boxes of a form so that they all line up under each other on the page. I was hoping to use #FullNameText{text-align:15%;color:c0c0c0;} in the CSS document for the following element
<p>
<span Id="FullNameText">Full Name:</span>
<input name="FullName" id="FullNameTab" autofocus="" onblur="fullNameCheck()" type="text">
</p>
The text-align:15% part has no effect on the page. Can % be used to align things?
Try this:
#FullNameText {
width: 15%;
color: #c0c0c0;
display: inline-block;
}
Not possible to text-align to %
text-align can only be left, right, center, justify, inherit
update:
you can give padding or margin to #FullNameText
To associate elements together in a form, use fieldset rather than paragraph, and to associate a label with an input, use a label (with for attribute), this allows clicking on the label text to focus the element to which that text applies:
<fieldset>
<label for="fullNameTab" id="FullNameText">Full Name:</label>
<input name="FullName" id="FullNameTab" autofocus="" onblur="fullNameCheck()" type="text">
</fieldset>
Then you can specify width or margin on the label (as you could with the span, but this is a little more semantic and meaningful):
label {
display: inline-block; /* to allow a specified width to be defined */
width: 15%; /* adjust to taste */
margin: 0 5% 0 10%; /* 0 margin-top, 5% margin-left, 0 margin-bottom,
10% margin-left */
}
JS Fiddle demo.
no you can't use text-align with a % value.
If you want to align your input boxes exactly (presumably with their labels next to them) you could consider using floating divs.
<div class="row">
<div class="left label">Full Name:</div>
<div class="left content"><input name="FullName" id="FullNameTab" autofocus="" onblur="fullNameCheck()" type="text"> </div>
<div style="clear: both"></div>
</div>
css:
.row {
width: 100%;
}
.left {
float: left;
}
.label{
width:30%;
}
.content{
width:70%
}
I am using a wrapper but I am pretty confused. I want the two resultbox divs to be in line with the submit div.
Take a look here:
http://jsfiddle.net/QtVwr/
What am I doing wrong?
I'm not very familiar with CSS.
Part of the problem is that there are issues with your HTML. Here's a start:
make sure all the divs are closed.
remove the floats from your css
add display:inline-block;
remove the inline styles from your HTML.
correct the .wrapper class to be .wrapper1 (matching the HTML)
So, this is more what you want, I assume:
.wrapper1 {
height:70px;
width: 800px;
background: #ffffff;
border: 1px solid grey;
color: #BDBDBD;
}
.resultbox {
width: 300px;
background: #ffffff;
color: #BDBDBD;
display: inline-block;
}
.submit {
height:15px;
width: 32px;
margin-top:10px;
background: #ffffff;
border: 1px solid;
color: #BDBDBD;
display: inline-block;
}
and the HTML
<div class="wrapper1">
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="width:35px;" >
<div class="submit"></div>
</div>
</div>
Example: http://jsfiddle.net/QtVwr/2/
You will still need to fiddle with it. But this is a start.
To make div inline you should use the following CSS style:
.mydiv{ display: inline; }
Note: Change width of your wrapper (make it smaller) and you will see the results
There are several issues with the code you have provided.
you have defined css rules for a class wrapper but use class wrapper1 in your html
class wrapper doesn't have enough width for both of the result boxes plus the submit
There are extra quotes on the second result box style="margin-left: 5px; margin-top: 3px;""
form tags are malformed and being intertwined with your div tags
form tags aren't closed
locationresult div tag isn't closed
floats need to be cleared
here is a fiddle
http://jsfiddle.net/e3dg6/
The width of your results boxes combined exceeds the width of your wrapper. You need to either make the wrapper wider or reduce the width on the resultboxes.
Why do you have the submit div within a resultbox div?
Why the margin-left:10px, only with the first div?
I'd do it like this:
<div id="wrapper">
<div class="resultbox"></div>
<div class="resultbox"></div>
<div id="submit"></div>
</div>
And set the width and height of the wrapper, and let the other divs float. It's just a longshot, not exactly sure what you're trying to accomplish. I just think your nesting is not okay.
Eventually, our team would like to move away from tables, but it seems like div tags are so much harder to use. In the above image, the layout was created using a table, but I cant figure out how to get a basic column structure working using div tags. How can I get those buttons on the same line? HTML newbie here.
Not too difficult:
HTML:
<form id="login">
<div>
<label for="user">Username:</label>
<input id="user" type="text" size="20">
</div>
<div>
<label for="pass">Password:</label>
<input id="pass" type="password" size="20">
</div>
<div>
<input id="cancel" type="reset" value="Cancel">
<input id="submit" type="submit" value="Login">
</div>
</form>
CSS:
#login {
background-color: #FEFEDD;
border: 3px solid #7F7F7F;
display: inline-block;
padding: 20px;
text-align: right;
}
#login div {
padding: 5px;
}
#login label {
font-weight: bold;
margin-right: 5px;
}
#login #cancel {
float: left;
}
Live Demo
To be short, if you want to put many elements with div tags in the same line you should give for each div a left float and a width. For example:
<div style="width:50px; float:left;"> Element 1</div>
<div style="width:50px; float:left;"> Element 2</div>
...
As bad as it is to use tables for positioning elements on a page, forms is one exception I often make. Sure you can float your DIVs, but you're going to write a lot more code to do that than using tables. Plus we're talking about a tabular format with rows and columns. If you're not supposed to use tables for a tabular format, then why have the tags in the HTML at all?
If you give the elements a position:absolute then you can set the left: value and the top:value to align the buttons.
div#cancelbutton {
position: absolute;
top:50px;
left:30px;
}
div#loginbutton {
position:absolute;
top:50px;
left:300px;
}
This will place the element quote: relative to the first parent element that has a position other than static.
Check out http://www.w3schools.com/Css/css_positioning.asp
Maybee is better to use float:let then display: inline-block; because IE9 could display textboxes in two rows.
Check http://interestingwebs.blogspot.com/2012/10/div-side-by-side-in-one-line.html for examples.