Website I'm building
Hello, I'm wondering if anyone could help me achieve the layout in this photograph? I'm trying to build this website, and my current progress is being frustrating. I've created the basic layout but it doesn't work correctly.
I'm not sure on how to position the content to match this image. If someone could point me in the write direction that would be great.
<body>
<div>
<div>
<div>
<div>
<h3>LOGO</h3>
</div>
<div>
<hr>
<h2>Console</h2>
</div>
<div class="form">
<form>
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
Forgot your password?
<button type="submit">Log in</button>
</form>
</div>
<div class="images">
<a id="firstPostLink" target="_blank">
<div class="box" id="firstPostImg">
</div>
</a>
<a id="secondPostURL" target="_blank">
<div class="box" id="secondPostImg">
</div>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
Heres the CSS`body {
background-color: #13253F;
color: white;
}
a {
text-decoration: none;
color: white;
}
hr {
border: solid #6cc1d6;
border-width: 5px 5px 5px 5px;
clear: both;
margin: 10px 0;
height: 0;
width: 160px;
position: relative;
left: 100px;
}
h3 {
text-align: center;
}
h2 {
margin-left: 100px;
margin-top: -15px;
}
label {
color: #f0f0f0;
}
.form {
padding: 20px;
margin: 0 auto;
position:relative
}
.box {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 600px;
height: 600px;
border:2px solid white;
}
.images {
position:absolute;
left:200px;
height:100%;
}
#firstPostImg {
position:relative;
left:1100px;
top:-300px;
}
#secondPostImg{
position:relative;
left:1100px;
top:-300px;
padding-bottom:0;
}`
Here's the link to the codepen
You didn't make it clear what specific issues you're trying to fix. But I do see several things that should be improved in the code. The first of which is the amount of divs you have. It seems you may have a lot of unnecessary nesting.
And if one of your goals is to make things more responsive, it's a good idea to use a grid framework (such as bootstrap or foundation).
Using Bootstrap, I created a wireframe of the beginning of what you're wanting to achieve. I'd recommend looking closely at how the grid system works. That'll make a big difference.
Here's my demo.
HTML
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<!-- Logo here-->
<img src="http://placehold.it/335x115" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1">
<!-- Console -->
<h2>Console</h2>
</div>
</div>
<form class="row">
<!-- Form -->
<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-2">
<div class="row">
<div class="col-md-12 form-group">
<label for="email" class="control-label">Email Address: </label><br>
<input type="email" name="email" id="email">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label for="password" class="control-label">Password: </label><br>
<input type="text" name="password" id="password">
</div>
</div>
<div class="row">
<div class="col-md-8">
Forgot your password?
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
</div>
</div>
</form>
</div>
<sidebar class="col-md-3 col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-6">
<img src="http://placehold.it/275x290" class="img-responsive">
</div>
<div class="col-lg-12 col-md-12 col-xs-6">
<img src="http://placehold.it/275x290" class="img-responsive">
</div>
</div>
</sidebar>
</div>
I'd recommend positioning/styling everything you create. Good thourough code will ensure less issues with different browsers and devices.
Only use the containers (divs) you actually need, give them a class or ID and position everything properly in your CSS. Minimum you should float and give a width to your key structural divs so you get predictable results.
Here's one possible solution:
$(document).ready(function() {
feednami.load(urlToHT, getHeaderTagPost);
feednami.load(urlToKX, getKXBlogPost);
});
var firstPostImg = $("#firstPostImg");
var secondPostImg = $("#secondPostImg");
var firstPost = $("#firstPost");
var secondPost = $('#secondPost');
var firstPostURL = $("#firstPostLink");
var urlToImg = "";
var urlToArticle = "";
var urlToHT = 'http://wiki.headertag.com/feed';
var urlToKX = "http://kx.indexexchange.com/feed/";
var secondPostUrl = $("#secondPostURL");
function getHeaderTagPost(data) {
if (data.error) {
console.log(data.error);
} else {
var entries = data.feed.entries;
console.log("Header Tag " + entries);
urlToImg = removeCharacters(entries[0].image.url);
urlToArticle = entries[0].link;
firstPostImg.css("background-image","url("+ urlToImg +")");
console.log(urlToImg);
// firstPost.attr("src", urlToImg);
firstPostURL.attr("href", urlToArticle);
}
}
function getKXBlogPost(data) {
if (data.error) {
console.log(data.error);
} else {
var entries = data.feed.entries;
console.log("KX blog: " + entries);
urlToImg = removeCharacters(entries[0].image.url);
urlToArticle = entries[0].link;
console.log(urlToImg);
secondPostImg.css("background-image","url("+ urlToImg +")");
secondPostUrl.attr("href", urlToArticle);
}
}
function removeCharacters(string) {
return string.substring(0, string.indexOf('?'));
}
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
body {
background-color: #13253F;
color: white;
}
a {
text-decoration: none;
color: #00AFE5;
}
hr {
border: solid #6cc1d6;
border-width: 5px;
clear: both;
margin: 10px 0;
height: 0;
width: 100%;
position: relative;
float: right;
}
h3.logo {
margin-top: 110px;
text-align: center; margin-bottom: 40px;
}
h2 {
}
label {
color: #f0f0f0;
}
.form {
margin-top: 100px;
}
.box {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 300px;
border:2px solid white;
}
.images {
position:absolute;
right: 0px; top:0;
height:100%;
}
#firstPostImg {
position:relative;
}
#secondPostImg{
position:relative;
padding-bottom:0;
}
#media screen and (max-width: 992px) {
form.form {margin-top:30px;}
#firstPostImg {margin-top: 30px;}
}
<div class="container">
<div class="col-md-8">
<div class="col-md-12">
<h3 class="logo">Index Exchange</h3></div>
<div class="col-md-3">
<hr>
<h2>Console</h2>
</div>
<div class="col-md-6">
<form class="form">
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="row">
<div class="col-md-7">
Forgot your password?
</div>
<div class="col-md-5">
<button class="btn btn-info btn-block" type="submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-4">
<a id="firstPostLink" target="_blank"><div class="box" id="firstPostImg"></div></a>
<a id="secondPostURL" target="_blank"><div class="box" id="secondPostImg"></div></a>
</div>
</div> <!-- end of .container -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Related
I have a row of divs:
row of divs
When I decrease the window size they move down and stack on top of one another
divs stacked on top of one another
another example of the divs stacked
Instead of having them move down one by one as the window size gets smaller I want them to all move down together to the next row like so:
how I would like the divs to display
How would I go about doing this using divs? or if there is another method (like flex boxes) please let me know. Thanks!
Here is all the relevant code:
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:white;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3+
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
CSS:
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
you need to consider a few points
you need to make div responsive in small screen devices by adding col-12 before col-md-6.
if you're using bootstrap then learn it well and you don't need to use inner css.
replace this:
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
with this:
<div class="col-12 col-md-6 pricing-boxes">
<div class="pricing-box"><h2><b>$1495</b></h2><h6>MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$1495</b></h2><h6>NON-MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$2000</b></h2><h6>VIPS</h6></div>
</div>
Use #media and when size of screen is reduced to specific size then apply width: % to class .pricing-boxes like used in below snippet.
Use padding and margins according to need
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
#media screen and (max-width: 900px) {/*Value may be from where it start stacking*/
.pricing-boxes{
width: 100%;
/*adjust padding and margin according to need*/
}
}
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:black;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3+
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">MEMBERS</p>
</div>
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p>
</div>
<div class="pricing-box">
<p style="font-size:50px"><b>$2000</b></p>
<p style="font-size:23px; margin-top:-30px">VIPS</p>
</div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
I'm developing a Java Spring Boot Web App, but CSS is not my specialty. I've attached two images. One is the login page before an attempted login, and the next is after a failed attempted login. The issue is that after the text showing the failed login is added to the page, for some reason, the size of the input fields gets larger. I'm not sure why this is, but I've attached both the HTML and CSS for the relevant tags below:
<div id="parentLogin">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div>
<c:if test="${param.error != null}">
<div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
</c:if>
</div>
<div class="panel panel-default" style="width: 275%;">
<div class="panel-heading">
<div class="panel-title" style="text-align: center; font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
</div>
<div class="panel-body">
<form method="post" action="${loginUrl}" class="login-form">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<div class="input-group">
<input type="text" name="username" placeholder="Username"
class="form-control" />
</div>
<div class="input-group">
<input type="password" name="password" placeholder="Password"
class="form-control" />
</div>
<button type="submit" class="suit_and_tie">Sign In</button>
</form>
</div>
</div>
</div>
</div>
</div>
#profileAbout, #parentLogin {
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
}
.login-error {
margin-top: 10px;
margin-bottom: 10px;
color: red;
font-weight: bold;
}
Thank you in advance for the help!
The parent container .row doesn't have a specified width. This allows content inside of the container to take up space as it needs. When the login error message text is introduced, the <input> elements widen as the text from error message is filling the entire width of the parent container.
Try this. I gave .row a specific width and updated some CSS to mimic the photos you included. Now, with or without the error message text, your .row container with login content will always be 240px wide or whatever width you'd like.
#profileAbout, #parentLogin {
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
}
.row {
width: 240px;
padding: 10px;
}
.panel-body {
width: 100%;
}
input {
width: 95%;
margin: 3px;
height: 25px;
}
.panel-title {
text-align: center;
margin: 5px;
}
.suit_and_tie {
background: #FFF;
margin-top: 5px;
border-radius: 500px;
border: 1.5px solid #000;
padding: 5px 25px 5px 25px;
}
.login-error {
margin-top: 10px;
margin-bottom: 10px;
width: auto;
color: red;
font-weight: bold;
}
<div id="parentLogin">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div>
<c:if test="${param.error != null}">
<div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
</c:if>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
</div>
<div class="panel-body">
<form method="post" action="${loginUrl}" class="login-form">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<div class="input-group">
<input type="text" name="username" placeholder="Username"
class="form-control" />
</div>
<div class="input-group">
<input type="password" name="password" placeholder="Password"
class="form-control" />
</div>
<button type="submit" class="suit_and_tie">Sign In</button>
</form>
</div>
</div>
</div>
</div>
</div>
I have an auto-generated file input form element:
<div id="university_logo">
<img src=/media/userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg>
<div class="form-group">
<label class="control-label" for="id_univercity_logo">Logo</label>
<div class="row bootstrap3-multi-input">
<div class="col-xs-12">
Currently:
userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg<br />
Change:
<input type="file" name="univercity_logo" autocomplete="off" class="" title="" id="id_univercity_logo" />
</div>
</div>
</div>
</div>
I am trying to remove the labels "Currently:" and "Change:"
My css code is:
#university_logo {
.form-group{
.row{
margin-left: 0;
margin-right: 0;
.col-xs-12{
*:not(#id_univercity_logo){
display: none;
}
}
}
}
}
However the two labels don't disappear.
Can I select a label without a label tag?
Could use visibility
.col-xs-12 {
visibility:collapse; /*hidden, in this case same result*/
font-size: 0px;
}
.col-xs-12 input{
visibility:visible;
}
.col-xs-12 a{
visibility:visible;
font-size: 15px;
}
<div id="university_logo">
<img src=/media/userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg>
<div class="form-group">
<label class="control-label" for="id_univercity_logo">Logo</label>
<div class="row bootstrap3-multi-input">
<div class="col-xs-12">
Currently:
Image Tag<br />
Change:
<input type="file" name="univercity_logo" autocomplete="off" class="" title="" id="id_univercity_logo" />
</div>
</div>
</div>
</div>
try css code this way
#university_logo .form-group .row {
margin-left: 0;
margin-right: 0;
}
.col-xs-12 {
display: none;
}
<div id="university_logo">
<img src=/media/userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg>
<div class="form-group">
<label class="control-label" for="id_univercity_logo">Logo</label>
<div class="row bootstrap3-multi-input">
<div class="col-xs-12">
Currently:
userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg<br /> Change:
<input type="file" name="univercity_logo" autocomplete="off" class="" title="" id="id_univercity_logo" />
</div>
</div>
</div>
</div>
I am making a chat application with angular and bootstrap for practice.
Trying to make div border wrap around the text like the iPhone message bubbles,
inline-block didn't seem to work.
relevant code:
<div class="col-md-4 chatWindow">
<div ng-show="activeFriend">
<div class="activeFriendBox">Chat with {{activeFriend.name}}</div>
<div class="messageList">
<div class="messages"
ng-class="{ 'message-right': message.from === currentUser, 'message-left': message.from !==currentUser }"
ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
<span>{{message.from}}</span>
<span>{{message.message}}</span>
</div>
</div>
<div class="sendMessage">
<form ng-submit='sendMessage(messageText)' name='messageForm'>
<input type='text' name='message' ng-model='messageText' required/>
<input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
</form>
</div>
</div>
</div>
CSS:
.messages {
border: 1px solid black;
border-radius: 15px;
/*display: inline-block;*/
}
.message-right {
text-align: right;
}
.message-left {
text-align: left;
}
You have to float the containing divs left and right, and then clear each one.
HTML:
<div class="col-md-4 chatWindow">
<div class="activeFriendBox">Chat with {{ activeFriend.name }}</div>
<div class="messageList">
<div class="messages message-right">
<p>Message from 1</p>
<p>Message 1</p>
</div>
</div>
<div class="messageList">
<div class="messages message-left">
<p>Message from 2</p>
<p>Message 2</p>
</div>
</div>
<div class="sendMessage">
<form ng-submit='sendMessage(messageText)' name='messageForm'>
<input type='text' name='message' ng-model='messageText' required/>
<input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
</form>
</div>
</div>
CSS:
.messages {
border: 1px solid black;
border-radius: 15px;
display: inline-block;
}
.message-right {
clear: both;
float: right;
}
.message-left {
clear: both;
float: left;
}
.sendMessage {
clear: both;
}
.col-md-4 {
width: 33%;
}
Demo: https://jsfiddle.net/jcmorris/m2a3Lrxv/1/
Nevermind, i figured it out, i had to put the inline-block on the spans inside the div instead of the div itself
HTML
<div class="col-md-4 chatWindow">
<div ng-show="activeFriend">
<div class="activeFriendBox">Chat with {{activeFriend.name}}</div>
<div class="messageList">
<div class="message-wrap"
ng-class="{ 'message-right': message.from === currentUser, 'message-left': message.from !==currentUser }"
ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
<div class="message">
<span>{{message.from}}</span>
<span>{{message.message}}</span>
</div>
</div>
</div>
<div class="sendMessage">
<form ng-submit='sendMessage(messageText)' name='messageForm'>
<input type='text' name='message' ng-model='messageText' required/>
<input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
</form>
</div>
</div>
</div>
CSS
/* Represents row (block you wanted) */
.message-wrap {
margin-bottom: 10px;
}
/* Represents message */
.message {
border: 1px solid black;
border-radius: 15px;
display: inline-block;
}
.message-right {
text-align: right;
}
.message-left {
text-align: left;
}
I need to make multi-column form layout, where each row can have different count of fields, like this:
First time I used table and td's colspan attribute for creating layout. But I read that laying out using tables is not good idea, so I want to improve my code to use div's.
So can anybody give me good example of how to make layout like above according to best practices? The most problem to me is that width of columns is different.
Thanks.
Don't kill me for not writing 100% valid input fields and not a clear layout with margins etc.
Sample
http://jsfiddle.net/hpmJ7/4/
HTML
<div>
<div class="w50">
<span class="label">Name</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Surname</span>
<input type="text" value="Test" />
</div>
<div class="w100">
<span class="label">Contact</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Age</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Email</span>
<input type="text" value="Test" />
</div>
<div class="w70">
<span class="label">Phone</span>
<input type="text" value="Test" />
</div>
<div class="w30">
<span class="label">Time</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Age</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Email</span>
<input type="text" value="Test" />
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.label {
width: 60px;
display: inline-block;
}
.w30, .w50, .w70, .w100 {
height: 20px;
float: left;
display: inline-block;
width: 100%;
}
.w30{
width: 30%;
}
.w50{
width: 50%;
}
.w70{
width: 70%;
}
.w100{
width: 100%;
}
The trick here is to come up with some sort of grid system. In my example, I've put together a 5% based grid system. You can see a basic example of some of your exact pieces in this fiddle.
#container { font-size: 12px; width: 700px; }
.row { float: left; margin: 5px 0; width: 100%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }
.item { box-sizing: border-box; float: left; }
input, select, option { margin: 0; }
And I've placed the items into rows to provide for a clean, grid-like look.
<div id="container">
<div class="row">
<div class="item w15">/* Entity Name</div>
<div class="item w35">Maricopa County Community College District</div>
<div class="item w50">*Domain: USPF, SLG, Special Districts, Community College</div>
</div>
<div class="row">
<div class="item w15">/* Doctype</div>
<div class="item w10">NLP?</div>
<div class="item w20">Filename/Keywords</div>
<div class="item w20">*Source Frequency</div>
<div class="item w35">
<input type="radio" name="freq" checked="checked" />
<label>Daily</label>
<input type="radio" name="freq" />
<label>Weekly</label>
<input type="radio" name="freq" />
<label>Monthly</label>
</div>
</div>
<div class="row">
<div class="item w15">
<input type="checkbox"/>
<label>Audit</label>
</div>
<div class="item w10">
<input type="checkbox"/>
</div>
<div class="item w20">
<input type="text"/>
</div>
<div class="item w20">*Every</div>
<div class="item w15">
<input type="text" class="w20" value="1"/>
<label>Days</label>
</div>
<div class="item w20">
<select>
<option value="utc-6">UTC -6</option>
</select>
</div>
</div>
</div>
Basically, a specific structure is what you're after, and a grid-like system placed in rows is a great way to do that.
Tables are not that bad.
The reason of why tables are not recomended for layout is that the table is loaded(content of it is shown) only when everything in the table has loaded in the page. But divs show their contents as soon as they are loaded.
Now in you case your form looks fairly complex to me and I think it is not desirable to show partial contents of this form while page is still loading. You definitly want to show all the fields of your form at the same time.
Also, when you want to represent tabular data (which I think applies to your case) then it is recomended to use tables.
So I would suggest(I may be wrong, please somebody correct me if I am) using table for this form of yours.
Also one more benefit that tables provide is you don't have to worry too much about the alignment of your contents.
You can basically create multiple css classes which will depict all those widths you want to depict. It will not be strictly flexible columns, but more like flexible rows, you will have to think in terms of rows instead of columns.
so for each row you would attach specific width classes
<div class="row">
<div class="left width-50"></div>
<div class="right width-50"></div>
</div>
<div class="row">
<div class="left width-70"></div>
<div class="right width-30"></div>
</div>
<div class="row">
<div class="left width-100"></div>
</div>
....
....
Hope it will help.
Check this out:
HTML
<html>
<head>
<link rel="stylesheet" href="contactForm.css"></link>
</head>
<body>
<div id="contactform">
<div id="first">
<div id="name">
<div id="description">Name</div>
<input type="text" name="textName">
</div>
<div id="surname">
<div id="description"> Surname</div>
<input type="text" name="textSurname">
</div>
</div>
<div id="second">
<div id="contact"><div id="description">Contact</div> <input type="text" name="textContact"></div>
</div>
<div id="third">
<div id="age">
<div id="description">Age</div>
<input type="text" name="textAge">
</div>
<div id="e-mail">
<div id="description">E-mail</div>
<input type="email" name="textEmail">
</div>
</div>
<div id="fourth">
<div id="phone">
<div id="description">Phone</div>
<input type="text" name="textPhone">
</div>
<div id="time">
<div id="description">Time</div>
<input type="date" name="textTime">
</div>
</div>
</div>
</body>
</html>
CSS
#contactform {width:500px; height:500px;}
#contactform div {float:left; padding-top:5px;}
#first, #second, #third, #fourth {width:100%;}
#first #description {width:30%;}
#name, #surname {width:50%;}
#surname #description {margin-left:11px;}
#first input {width:65%;}
#second #description {width:15%;}
#contact {width:100%;}
#second input {width:85%;}
#third #description {width:30%;}
#age, #e-mail {width:50%;}
#e-mail #description {margin-left:11px;}
#third input {width:65%;}
#fourth #description {width:30%;}
#phone, #time {width:50%;}
#time #description {margin-left:11px;}
#fourth input {width:65%;}
Output
HTH.