-
Sep 12th, 2014, 03:15 PM
#1
[RESOLVED] [CSS] Vertically Stack DIVs
I'm having an issue with vertically stacking two DIV elements. In one DIV I have two forms which I want to be horizontally aligned and in the other I have DIV elements which I want to be vertically aligned. Here is my HTML:
Code:
<div id='main'>
<h3>Search</h3>
<div>
<form>
<legend>Criteria</legend>
<div class='radioButton'><input name='for' type='radio' value='criteria'>Name</div>
<div class='radioButton'><input name='for' type='radio' value='criteria'>Estate</div>
<div class='radioButton'><input name='for' type='radio' value='criteria'>Business/Organization</div>
<div class='radioButton'><input name='for' type='radio' value='criteria'>Policy</div>
<div class='radioButton'><input name='for' type='radio' value='criteria'>Phone</div>
<div class='radioButton'><input name='for' type='radio' value='criteria'>Email</div>
</form>
<form>
<legend>For</legend>
<div class='radioButton'><input name='for' type='radio' value='customer'>Customer</div>
<div class='radioButton'><input name='for' type='radio' value='prospect'>Prospect</div>
</form>
</div>
<div>
<div id='required'>
<h4>Required</h4>
<div class='ruler'></div>
<label id='lblRequired'></label><input id='txtRequired' placeholder='' type='text' />
</div>
<div id='optional'>
<h4>Optional</h4>
<div class='ruler'></div>
<label id='lblRequired'></label><input id='txtRequired' placeholder='' type='text' />
</div>
</div>
Here is the CSS:
Code:
#main {
display: block;
height: 100%;
left: 16%;
position: absolute;
width: 84%;
}
#main div {
margin: 15px 25px;
width: 100%;
}
#main form {
display: inline;
float: left;
}
This is how I'm wanting it to look like:
But for some reason I can't get it to work. What's happening is my bottom DIV in the <div id='main'> is to the right of the top DIV.
-
Sep 13th, 2014, 04:54 PM
#2
Re: [CSS] Vertically Stack DIVs
Hi there dday9,
does this help...
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled document</title>
<style media="screen">
#main {
width: 84%;
margin:auto;
}
#main form {
float:left;
margin:1% 1% 1% 0;
}
#main form fieldset {
padding:1em;
white-space:nowrap;
}
#main form label {
display:block;
margin:0.5em 0;
}
#main form input {
margin-right:1.25em;
}
#required {
clear:both;
}
</style>
</head>
<body>
<div id="main">
<h3>Search</h3>
<form action="#">
<fieldset>
<legend>Criteria</legend>
<label><input name="for" type="radio" value="criteria">Name</label>
<label><input name="for" type="radio" value="criteria">Estate</label>
<label><input name="for" type="radio" value="criteria">Business/Organization</label>
<label><input name="for" type="radio" value="criteria">Policy</label>
<label><input name="for" type="radio" value="criteria">Phone</label>
<label><input name="for" type="radio" value="criteria">Email</label>
</fieldset>
</form>
<form action="#">
<fieldset>
<legend>For</legend>
<label><input name="for" type="radio" value="customer">Customer</label>
<label><input name="for" type="radio" value="prospect">Prospect</label>
</fieldset>
</form>
<div id="required">
<h4>Required</h4>
<label class="lblRequired"><input class="txtRequired" placeholder="" type="text"></label>
</div>
<div id="optional">
<h4>Optional</h4>
<label class="lblRequired"><input class="txtRequired" placeholder="" type="text"></label>
</div>
</div>
</body>
</html>
~ the original bald headed old fart ~
-
Sep 15th, 2014, 11:29 AM
#3
Re: [CSS] Vertically Stack DIVs
Thanks for the input coothead, but I actually decided to go with a different layout over the weekend.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|