Make checkbox, select and input fields inline - html

I am trying to make a search bar where a green div would be in the middle of the grey one(see http://codepen.io/anon/pen/LRBEvq?editors=1100), and checkboxes, select drop menu, and input field all inline with two buttons - so everything in the same row. I am using Bootstrap to make it responsive but got stuck and can't figure it out.. thank you for all the help!
Here's my html:
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-7">
<!-- main content -->
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
</div>
<div class="col-md-5">
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>


Use display: inline-block; for your wrapper divs to behave like inline elements without losing their block properties:
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
display: inline-block;
}
If you also want the buttons to be in the same row, use a <div class="col-md-12"> for the whole content.
To center your menu bar horizontally, use margin: 0 auto;; to center it vertically, position it, apply a top: 50%; and translate it back the half of its size in negative y-direction (up):
.formContainer {
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0,-50%);
}
To make the input text field as long as the remaining space, just set the width of the input the same as its wrapper div:
.mainContent .choice-input input {
width: inherit;
}
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
display: inline-block;
}
.mainContent .choice-input input {
width: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-12">
<!-- main content -->
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>


Horizontal centering:
For horizontal centering, we want the left and right margin to be equal. The way to do that is to set the margins to 'auto'. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.
Vertical centering:
The essential rules are:
Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
Make the element itself absolutely positioned.
Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)
So your code may seem like this
.main {
background-color: grey;
width: 1202px;
height: 156px;
position: relative;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
I hope you solved all the other problems.


Try modifying these rules:
.checkbox, .radio {
position: relative;
display: inline-block; // changed from block to inline-block. Block will take 100% width. To keep elements inline you must use inline-block
margin-top: 10px;
margin-bottom: 10px;
}
.choice-select {
width: 173px;
display: inline-block; // added inline-block
}
.choice-input {
width: 176px; // reduced width.
display: inline-block; // added inline-block
}


Check the code below, i have put the html controls in separate divs with bootstrap grid classes to make them inline and added margin: 0 auto in .formContainer class
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-7">
<!-- main content -->
<div class="col-md-4">
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
</div>
<div class="col-md-4">
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
</div>
</div>
<div class="col-md-5">
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}


You should be able to do what you want with only bootstrap markup. I've forked your pen and modified it a little:
http://codepen.io/ugreen/pen/XjBpqX
<div class="container">
<div class="row">
<div class="col-md-3 text">
Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="col-md-5">
<div class="form-inline">
<div class="form-group">
<input type="checkbox" value="" checked>
<label>Lorem</label>
<input type="checkbox" value="">
<label>Ipsum</label>
</div>
<div class="form-group">
<select class="form-control choice-select">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Placeholder text">
</div>
</div>
</div>
<div class="col-md-4">
<div class="button-group">
<button class="btn btn-default">Lorem ipsum lorem</button>
<button class="btn btn-default">Lorem lorem lorem</button>
</div>
</div>
</div>
</div>
</div>
But it might be even better to do something like in the bootstrap docs about navbars:
http://getbootstrap.com/components/#navbar

Related

label and the felder are not center in the rows

I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
body{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
background-color: #FFBB00;
}
.container{
width: 40%;
margin: 4% auto;
padding: 50px;
background-color: #fff;
border-radius: 15px;
box-shadow: #ccc 0 0 10px 0; /* للظل لحتى يطلع متناسب */
}
.title h1{
position: relative;
text-align: center;
font-size: 28px;
text-transform: uppercase;
}
.title h1::after{
content: "";
width: 30%;
height: 3px;
background-color: #FFBB00;
position: absolute;
top: 110%;
left: 35%;
}
.inputFeld{
padding: 10px;
margin: 10px;
border-radius:4px;
border: 1px solid #ccc;
}
.inputFeld:focus{
background-color: #FFBB00; ;
}
/* */
.parent-line{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
padding: 15px;
}
.parent-line .line-link{
display: flex;
flex: 1;
}
.parent-line .line-right{
flex: 1;
display: flex;
}
.parent-one-line{
padding: 15px;
}
.container .line label{
display: inline-block;
width: 150px;
text-align: left;
}
/* */
.btn{
padding: 19px 10px;
margin-bottom: 500px;
background-color: #000;
color: #fff;
border: none;
float: right;
cursor: pointer;
width: 100%;
}
.btn:hover{
background-color: #FFBB00;
color: #000;
}
.checken{
padding: 10px;
}
.select{
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
</style>
<body>
<section class="container">
<dic class="title"><h1>ITEMS VERLINKEN </h1></dic>
<form action="">
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label class="" for=""> Link URL </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
<div class="line-right">
<div class="line"> <label for=""> +articleNum+ </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> Full PDF name </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: test.pdf ">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Full PDF Links </label>
<input class="checkbox" type="checkbox" name="" id="">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> PDF Width in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 212" size="4">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> PDF Height in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 290 " size="4">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border around links</label>
<select class="select" name="" id="">
<option value="">No</option>
<option value="">Yes</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Border(RGB):</label>
<input class="inputFeld" type="text" name="" id="" placeholder="R" size="1">
<input class="inputFeld" type="text" name="" id="" placeholder="G" size="1" >
<input class="inputFeld" type="text" name="" id="" placeholder="B" size="1">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border Width(mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line">
<label for="">Margin top (mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
</div>
<!-- -->
<div class="parent-one-line">
<div class="line"> <label for=""> Save settings: </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: Customer1 ">
<h5>Leave empty to prevent saving.</h5>
</div>
<input class="btn" type="button" value="Start">
</div>
</form>
</section>
</body>
</html>

Simply add align-items:center to
.parent-line .line-right{
flex: 1;
display: flex;
}
and increase/decrease input text height/font size to match the center.

Unable to type a response in an <input> tag

Goal: I am trying to make a form for users to submit their school schedule
Problem: the first of my input tags will not let me type an input. All the input sections are set up the same accept for their place holder text. they all follow the same pattern and have the same classes applied.
Notes: I know you are able to type in the input field inside of the snippet but it does not work when implemented into my full webpage. Also I'm fairly new to HTML/CSS so excuse the fact that my code is kinda messy. Any constructive criticism is openly accepted.
.form {
width: 680px;
height: 870px;
}
.inputConatiner {
height: 75px;
width: 680px;
display: inline-block;
float: left;
}
.textContainer {
height: 75px;
width: 405px;
display: inline-block;
}
.submitContainer {
width: 100%;
height: 40px;
position: relative;
}
.submit {
height: 40px;
width: 150px;
display: inline-block;
position: absolute;
left: 50%;
top: 2075%;
margin: 0 0 0 -75px;
}
input[type="text"] {
border: black 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-bottom: 13px;
font-family: "Arial";
}
input[type="radio"] {
height: 30px;
width: 30px;
margin: 0;
vertical-align: middle;
}
input[type="submit"] {
height: 40px;
width: 150px;
border: black 0px solid;
border-radius: 20px;
}
label[for="A"],
label[for="B"] {
display: inline-block;
width: 160px;
font-family: "Arial";
}
fieldset {
border: black 0px solid;
padding: 0px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
display: inline-block;
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
vertical-align: middle;
}
input {
width: 200px;
}
<head>
<title>Side Project</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>
<div class="form">
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">2A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">3A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">4A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">A Day Lunch</h1>
<input type="radio" id="A" name="lunchADay" />
<label for="A">First Lunch</label>
<input type="radio" id="B" name="lunchADay" />
<label for="B">Second Lunch</label>
</div>
<div class="inputConatiner">
<h1 class="label">1B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">2B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">3B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">4B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">B Day Lunch</h1>
<input type="radio" id="A" name="lunchBDay" />
<label for="A">First Lunch</label>
<input type="radio" id="B" name="lunchBDay" />
<label for="B">Second Lunch</label>
</div>
<div class="submitContainer">
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
</div>
</form>
</div>

You have floated the row elements but not cleared them. As a result, the submit button's container element sits at the top of the page, partially overlapping the rows, even though the button itself has been pushed to the bottom (using absolute positioning).
Instead of doing this, you need to first clear the floated elements using .submitContainer, and center-align the button within it:
.submitContainer {
width: 100%;
height: 40px;
position: relative;
/* CLEAR THE FLOATED ROWS */
clear: both;
/* CENTER-ALIGN THE CONTENTS OF THIS CONTAINER */
text-align: center;
}
Next, remove the absolute positioning from the .submit element itself, as well as the negative margin (since it is now being aligned by its container):
.submit {
height: 40px;
width: 150px;
display: inline-block;
/* position: absolute; <- REMOVE THIS */
/* left: 50%; <- REMOVE THIS */
/* top: 2075%; <- REMOVE THIS */
/* margin: 0 0 0 -75px; <- REMOVE THIS */
}
That will allow the submit container and button to sit below the form without having to push it down.

The problem is that your wrapper div for submit button is overlapping the first input. Since you've used float: left in all your inputs, try and contain all of them in one div tag.
Add this to your css
.clearfix::after {
content: "";
clear: both;
display: table;
}
And wrap your inputs like
<form method="post" action="#" name="getStudentInfo">
<div class="clearfix">
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="submitContainer">
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
</div>
</form>

Let me start by telling that your css and containers work needs more working...
Your first input tag did not let you type since the "submitcontainer" was overlapping the input tags... I removed the submit Container and positioned the submit button slightly... But I implore you to learn some styling and not dependent on absolute positions...
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
.submit {
height: 40px;
width: 150px;
display: inline-block;
position: absolute;
left: 30%;
top: 100%;
margin: 0 0 0 -75px;
}
Codepen link: https://codepen.io/anon/pen/MrJGrN

How to make this search bar responsive in Bootstrap?

I am looking for a way to make this search bar with its inputs and buttons responsive. However i got stuck with Bootstrap properties and when I shrink the window everything stacks very bad and I just can't figure out how to apply some better classes and props. Here's the codepen link: http://codepen.io/anon/pen/WGKOmB
Appreciate all advices
This is my html:
.row {
background-color: blue;
padding: 40px 30px;
}
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
div.form-group.checkbox {
width: 207px;
background-color: white;
padding: 5px 10px;
}
select.form-control {
width: 173px;
}
input.form-control.choice-input {
/*.choice input input*/
width: 360px;
height: 38px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<!-- row -->
<div class="col-md-8 col-sm-6" style="background-color: lightblue; height: 74px;">
<p>Lorem ipsum</p>
<div class="form-inline">
<div class="form-group checkbox">
<span><input type="checkbox" value="" checked></span>
<label>Lorem</label>
<span><input type="checkbox" value=""></span>
<label>Ipsum</label>
</div>
<div class="form-group">
<select class="form-control">
<option value="one">Lorem ipsum</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="form-group">
<input class="form-control choice-input" type="text" placeholder="Placeholder text">
</div>
</div>
<!-- end form-inline -->
</div>
<div class="col-md-4 col-sm-6" style="background-color: lightgreen; height: 74px;">
<p class="pull-right">Lorem ipsum</p>
<div class="btn-group">
<button class="btn btn-default" style="margin-right: 10px">Lorem ipsum lorem</button>
<button class="btn btn-default">Lorem lorem lorem</button>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
</body>

Word from the wise (not me), never use inline styling. Always put everything in CSS. Also, you set a specific height for both the blue box and the light green box. Therefore, even when the browser is narrower and would be in col-sm-* and col-xs-* territory, you still have a set height. You should give a class name, for example form-height and then in CSS write something like the following:
.form-height {
height: 150px; /* Or whatever height you find appropriate */
}
#media (min-width:768px) {
.form-height {
height: 74px;
}
}
What this would do is say that when the browser is narrower than 768px, i.e. when it is considered col-xs-* by bootstrap, it should have a certain height. When it is larger it will have a different height.
However, an ever better solution is to never even use the height property. The reason you are doing this is probably because you want a certain padding. Therefore, you can write the following CSS for the class:
.form-height {
padding: 10px 0px; /* Give the top and bottom 10px of padding and nothing to the right or left */
}

Try this code
<div class="container">
<form class="form-inline" style="padding: 20px 0;">
<div class="row">
<div class="col-sm-8 col-md-9">
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
</div>
<div class="form-group">
<select class="form-control" id="sel1">
<option>Option 1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Placeholder">
</div>
</div>
<div class="col-sm-4 col-md-3">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
</form>
Demo here : https://jsfiddle.net/adb0br5e/1/

Position of Divs in CSS/HTML

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>

how to make div border wrap around text, but still be block?

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;
}