Aligning three div's next to each other - html

I wish to align thee div containers next to each other and I have achieved it, my question now is: Is there a better way of doing it? Or is this way correct.
EDIT:
Another question I have, assume the div's width is not 33.33% but more like 20%, how do I evenly space them out?
fiddle link:
http://jsfiddle.net/robindashwood/fNB5A/
Here is my code, refer to the div's with ID BodyColumn1 to 3.
My code of index.html
<body>
<div id="MainContainer">
<div id="HeaderContainer">
<div id="LogoContainter">
<img class="RoundedImg" src="Images/300x100stock.png">
</div>
<div id="NavigatieContainer">
<ul id="nav">
<!-- LVL 1 -->
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
<li>
Item 4
</li>
</ul>
</div>
</div>
<div id="BannerContainer">
<img class="RoundedImg" src="Images/1000x400stock.png">
</div>
<div id="BodyContainer">
<div id="BodyColumn1">
<p>Test</p>
</div>
<div id="BodyColumn2">
<p>Test</p>
</div>
<div id="BodyColumn3">
<p>Test</p>
</div>
</div>
</div>
</body>
Code of the css handling the layout:
/*Basic tags*/
body {
background-color: #efebdf;
}
/*DIV ID's*/
div#MainContainer {
width: 1000px;
margin-left:auto;
margin-right:auto;
overflow: auto;
}
div#HeaderContainer {
position: relative;
overflow: auto;
margin-bottom: 30px;
}
div#LogoContainter {
float: left;
position: relative;
margin-top: 2%;
border-radius: 0.5em;
}
div#NavigatieContainer {
float: right;
}
div#BannerContainer {
position: relative;
border-radius: 0.5em;
margin-bottom: 30px;
}
div#BodyContainer {
position: relative;
border-radius: 0.5em;
}
div#BodyColumn1 {
float: left;
width: 33.33%;
background-color: red;
}
div#BodyColumn2 {
float: left;
width: 33.33%;
background-color: yellow;
}
div#BodyColumn3 {
float: left;
width: 33.33%;
background-color: pink;
}
/*IMG's*/
img.RoundedImg {
border-radius: 0.5em;
}

You can use the inline-block value for display property
div#BodyColumn1 { display: inline-block; width: 33.3%; }

This is a correct way to do it and crossbrowser imo.
If you want you can try to do the same with others display properties, or try using the new flexboxes.

Related

How do you align 3 DIV's side by side inside of another DIV and right justify the last DIV?

I have a simple list item that I want to format. It contains 3 DIV's. I want the first DIV to be left justified, the second DIV to be able to grow as needed, and the third DIV to be right justified. I have the three DIV's stacked side by side, but I can't figure out how to get the last DIV to right justify. This is what it looks like now:
<li *ngFor="let script of scripts" [class.selected]="script === selectedScript" (click)="onSelect(script)">
<div class="container">
<div class="left">
<span class="badge">{{script.scriptOrderID}}</span>
</div>
<div class="center">
<span>{{script.scriptName}}</span>
</div>
<div class="right">
<span class="badge2">{{script.scriptID}}</span>
</div>
</div>
</li>
This is what I want it to look like:
.container {
display: flex;
}
.left {
width: 70px;
}
.center{
display: flex;
}
.right{
}
Take a look at flexbox, easy to use, and with flex-end it'll be fast to get your blocks at the end.
<div class="line">
<div class="first_block">
</div>
<div class="text">
Hello
</div>
<div class="second_block">
</div>
</div>
.line {
height : 40px;
width : 100%;
display : flex;
flex-flow : row wrap;
background-color : gray;
}
.first_block, .second_block {
background-color : blue;
width : 40px;
}
.text {
flex-grow : 1;
}
JSFIDDLE to show you the result.
Cheers !
You can do it without all the divs in the li...
Display your list-item as table, and the span's inside it as table-cell:
* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; }
ul {
width: 100%;
}
li {
width: 100%;
display: table;
margin-bottom: 2px;
}
li > span {
display: table-cell;
background: lightgrey;
}
li > span:first-child,
li > span:last-child {
background: black;
color: white;
width: 3em;
}
<ul>
<li>
<span>60</span>
<span>Click Add a Printer</span>
<span>53</span>
</li>
<li>
<span>70</span>
<span>Click "The printer I want isn't listed"</span>
<span>54</span>
</li>
<li>
<span>80</span>
<span>Select "Add a printer using a TCP/IP address or hostname" Click Next</span>
<span>55</span>
</li>
</ul>
Flexbox alternativ
* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; }
ul {
width: 100%;
}
li {
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 2px;
}
li > span {
background: lightgrey;
flex-grow: 1;
}
li > span:first-child,
li > span:last-child {
background: black;
color: white;
width: 3em;
flex-grow: 0;
}
<ul>
<li>
<span>60</span>
<span>Click Add a Printer</span>
<span>53</span>
</li>
<li>
<span>70</span>
<span>Click "The printer I want isn't listed"</span>
<span>54</span>
</li>
<li>
<span>80</span>
<span>Select "Add a printer using a TCP/IP address or hostname" Click Next</span>
<span>55</span>
</li>
</ul>
You can use a code like below.
You have fixed width divs on both sides and a center div with fluid width.
That should do the trick.
.container > div {
float: left;
padding: 0 10px;
}
.left{
width: 30px;
}
.right {
width: 30px;
}
.center {
width: calc( 100% - 120px);
background: #ccc;
}
<div class="container">
<div class="left">
<span class="badge">23</span>
</div>
<div class="center">
<span>test</span>
</div>
<div class="right">
<span class="badge2">44</span>
</div>
</div>
Using flexbox you can do this:
.container {
line-height: 50px;
background: #e1e1e1;
display: flex;
justify-content: space-between;
}
.center {
flex: 1;
}
.badge,
.badge2 {
display: block;
background: purple;
color: white;
text-align: center;
padding: 0 15px;
}
<div class="container">
<div class="left">
<span class="badge">*</span>
</div>
<div class="center">
<span>The Name will grow</span>
</div>
<div class="right">
<span class="badge2">**</span>
</div>
</div>

Aligning elements according to image

could someone help me with an example how to accomplish following layout? Is tables the best for this?
https://gyazo.com/80a2f66d280c480c1e6e70637959b271
I do not want to hardcode the width of the elements because I need it to be responsive aswell, thats why I am having a hard time..
So basicly I need it centered but not text-align centered. Appreciate all the help I could get.
Don't use tables, this makes it hard to optimize the website for mobile devices. Here's what I would do:
body {
font-family: Arial, sans-serif;
color: #444444;
}
.info {
border: 1px solid #bbbbbb;
border-width: 1px 0;
padding: 10px;
}
.row {
line-height: 30px;
padding: 10px;
}
.label {
display: inline-block;
width: 30%; /* You may want to adjust this property */
margin: 0 10px;
text-align: right;
font-size: 95%;
color: #888888;
}
button {
border: none;
background-color: #43CEAD;
border-radius: 3px;
padding: 4px 10px;
color: white;
font-size: 90%;
}
.right {
float: right;
}
<div class="info">
<div class="row">
<span class="label">Name:</span>
John Doe
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">Password:</span>
********
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">Animus Heart ID:</span>
B0 23459332
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">E-mail:</span>
john#doe.com
<button class="right">Edit</button>
</div>
</div>
Why tables? You can set div width in percent, isn't it?
.col--first {
width: 40%;
float: left;
text-align: right;
}
.col--second {
margin-left: 1%;
width: 59%;
float: left;
}
.col--second:after {
content: '';
display: table;
clear: both;
}
.right {
float: right;
}
<div>
<div class="col--first">Name:</div>
<div class="col--second">John
<button class="right">Edit</button>
</div>
<div class="col--first">Password:</div>
<div class="col--second">******
<button class="right">Edit</button>
</div>
</div>
Have a look at responsive tables:
.table {
display: table;
}
.table > .row {
display: table-row;
}
.table > .row > .cell {
display: table-cell;
}
<div class="table">
<div class="row">
<div class="cell">
First
</div>
<div class="cell">
Second
</div>
<div class="cell">
Third
</div>
</div>
</div>
#img {
width: 100%;
margin: 0 auto;
}
Width can be changed to reflect the desired size of the image, but this will center the image based on the parent element's size by dividing the two margins equally on the left and right.

Unwanted spacing between image and a div

I have some css issues. I'm trying to remove the space between a image and a label, and it does not work.
This is what I have:
And this is what I want:
I have problems with removing the space below he pictures and the same problem with the labels and the other div below them. In the same time I do not know how to position inline the headers from the footer.
This is my fiddle with my html and css:
https://jsfiddle.net/cwd6qw3o/
div img {
display: inline-block;
height: 30%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
display: inline-block;
margin-top: 0;
text-align: left;
width: 23%;
}
div.subcolor {
background-color: #ba0927;
display: inline-block;
height: 5px;
width: 23%;
}
div.footer {
display: inline-block;
background-color: #e6e6e6;
width: 100%;
height: 5%;
}
Please tell me what i am doing wrong :).
Thanks !
I think it is not a good structure in your HTML,why not wrap your item in the same li such as
<ul>
<li>
<img src="~/Content/cont1.png"/>
<p>Bosch Car Service</p>
</li>
<li>
<img src="~/Content/cont2.png"/>
<p>Afspraak Proefrit</p>
</li>
<li>
<img src="~/Content/cont3.png"/>
<p>Afspraak onderhoud</p>
</li>
<li>
<img src="~/Content/cont4.png"/>
<p>Routebeschrijiving</p>
</li>
</ul>
You can remove spaces with the following CSS:
div {
font-size: 0;
}
div.subtitle {
font-size: 1rem;
}
Live preview: JSFiddle
Additional styling is necessary.
please try below code
div::after {
content: "";
width: 60%;
}
.image-div {
float: left;
width: 100%;
}
div img {
float: left;
height: 30%;
margin-right: 1%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
float: left;
margin-right: 1%;
margin-top: 0;
text-align: left;
width: 23%;
}
.sub-div {
float: left;
width: 100%;
}
div.subcolor {
background-color: #ba0927;
float: left;
height: 5px;
margin-right: 1%;
width: 23%;
}
<body>
<img src="~/Content/slide1.png" id="slide" />
<div class="image-div">
<img src="http://dummyimage.com/200x200/000/fff"/>
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
</div>
<div class="sub-div">
<div class="subtitle">
Bosch Car Service
</div>
<div class="subtitle">
Afspraak Proefrit
</div>
<div class="subtitle">
Afspraak onderhoud
</div>
<div class="subtitle">
Routebeschrijiving
</div>
</div>
<div>
<div class="subcolor" id="sub1"></div>
<div class="subcolor" id="sub2"></div>
<div class="subcolor" id="sub3"></div>
<div class="subcolor" id="sub4"></div>
</div>
<div class="footer">
<div class="images">
<img src="~/Content/fb.jpg"/>
<img src="~/Content/contact.jpg"/>
<img src="~/Content/route.jpg"/>
</div>
<div class="information">
<div class="contact">
<h1>Houman BVBA</h1>
<label>Boterstraat 6</label>
<label>B-2811 Hombeek (Mechelen)</label>
<label>Tel. 015 41 39 39</label>
<label>Fax. 015/43 24 40</label>
</div>
<div class="schedule">
<h1>Openingsuren</h1>
<label>Maandag: 9u-12u|13u-18u</label>
<label>Dinsdag: 9u-12u|13u-18u</label>
<label>Woensdag: 9u-12u|13u-18u</label>
<label>Donderdag: 9u-12u|13u-18u</label>
<label>Vrijdag: 9u-12u|13u-18u</label>
<label>Zaterdag: 9u-12u|13u-18u</label>
</div>
</div>
</div>
</body>

Float a div to the right of another div

I am having trouble getting my image to be on the right side of the information that I am trying to display. My CSS skills are lacking and becoming more and more apparent, so the help is very appreciated.
Here is my HTML
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b><p>...</p></li>
<li><b>Facility Name</b><p>...</p></li>
<li><b>Address</b><p>...</p></li>
<li><b>City</b><p>...</p></li>
<li><b>Province</b><p>...</p></li>
<li><b>Postal Code</b><p>...</p></li>
<li><b>Roof Area</b><p>...</p></li>
<li><b>Roof Area Inspected</b><p>...</p></li>
<li><b>Last Inspected</b><p>...</p></li>
<li><b>Inspected By</b><p>...</p></li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/>
</div>
<br />
</div>
</div>
</div>
I am trying to get #facility_image to "float" to the right side of #facility_data.
Here is my CSS
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float:left;
}
#facility_data{
width: 375px;
margin: 0 !important;
}
/*facility image*/
#facility_image {
margin-top: 100px;
margin-left: 400px;
width: 350px;
padding: 5px;
float: left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper{
text-align: center;
}
Here is a JSfiddle.
How can I float my image to the right hand side of the data I am trying to display?
You are setting a huge margin to the image div that is putting it way down the screen.
Let the #facility_data take 60% of the container div and float left, and let the image take the other 37% and remove the margin. You also need to give some margin right for #facility_data to keep some space between the 2 divisions :
#facility_image {
/*margin-top: 100px; <<<<< huge margin
margin-left: 400px;<<<<< huge margin*/
width: 37%;
padding: 5px;
float: left;
}
#facility_data
{
width:60%;
margin-right:2%;
float:left;
}
Working example :
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float:left;
}
#facility_data{
width: 375px;
margin: 0 !important;
}
/*facility image*/
#facility_image {
width: 37%;
padding: 5px;
float: left;
}
#facility_data
{
width:60%;
margin-right:2%;
float:left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper{
text-align: center;
}
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b><p>...</p></li>
<li><b>Facility Name</b><p>...</p></li>
<li><b>Address</b><p>...</p></li>
<li><b>City</b><p>...</p></li>
<li><b>Province</b><p>...</p></li>
<li><b>Postal Code</b><p>...</p></li>
<li><b>Roof Area</b><p>...</p></li>
<li><b>Roof Area Inspected</b><p>...</p></li>
<li><b>Last Inspected</b><p>...</p></li>
<li><b>Inspected By</b><p>...</p></li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/>
</div>
<br />
</div>
</div>
</div>
Use display: inline-block to place the image horizontally with the data. Remove the margin set for the image since the image is already inside the parent container. Give a float: left for both the elements as the data comes first in the DOM, the image will go to the right.
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float: left; /* Add */
}
#facility_data {
width: 375px;
margin: 0 !important;
display: inline-block; /* Add */
float: left; /* Add */
}
/*facility image*/
#facility_image {
width: 350px;
padding: 5px;
float: left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper {
text-align: center;
}
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b>
<p>...</p>
</li>
<li><b>Facility Name</b>
<p>...</p>
</li>
<li><b>Address</b>
<p>...</p>
</li>
<li><b>City</b>
<p>...</p>
</li>
<li><b>Province</b>
<p>...</p>
</li>
<li><b>Postal Code</b>
<p>...</p>
</li>
<li><b>Roof Area</b>
<p>...</p>
</li>
<li><b>Roof Area Inspected</b>
<p>...</p>
</li>
<li><b>Last Inspected</b>
<p>...</p>
</li>
<li><b>Inspected By</b>
<p>...</p>
</li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250" />
</div>
<br />
</div>
</div>
</div>
you have lacked float
#facility_data {
float: left;
}
#facility_image {
margin-top: 0;
margin-left: 0;
}
although not the best technique, you can learn to use FlexBox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've tidied up your JSFiddle, removing some of the unecessary HTML elements and also fixing an error in the HTML, which was the second <ul>. It should have been </ul>to close the list.
In the jsfiddle, we can see the following reduced css as an example:
.facility_info {
width: 800px;
}
.facility-list {
float:left;
width: 400px;
}
.facility-image {
width: 350px;
float: right;
}
.facility_info is wide enough to accomodate both the defined child widths and also the browser default <ul> styling which adds a margin.
Then the two children are floated left and right respectively. The selectors are added directly to the <ul> and <img /> tags as you don't need wrappers (though you could wrap these children and apply the css to the wrapper).
I've used classes rather than ids, this is better in the long run as it makes it easier to maintain css on a project. IDs add styles in a way that is hard to over-ride, can't be re-used and are unnecessary for styling.
Apart from this, you were also suffering a bit from the default css properties added to html elements by browsers. Loading a reset.css file will help with this. A reset css declaration loads some defaults at the top of the css file that set various values to 0 to over-ride the default properties set by the browser. It gives you a more consistent and less confusing base to start styling from

<nav> won't abide to body

I'm really not sure that my title is correct english. Hehe. But fortunately I can explain my problem in pictures ;-)
My problem is this:
body {
font: calibri;
background-color: #2d2e29;
margin-left: 150px;
margin-right: 150px;
margin-bottom: 0px;
margin-top: 0px;
}
p {
margin: 0px;
}
nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #FFFFFF;
opacity: 0.75;
top: 0;
left: 0;
margin-left: 150px;
margin-right: 150px;
}
nav ul {
float: right;
list-style-type: none;
padding: 0;
margin-top: 30px;
margin-right: 30%;
}
nav li {
display: inline;
}
nav a {
margin: 5px;
color: black;
}
nav a:hover {
color: #99cccc;
}
#Forside {
background-color: #3f5c93;
height: 800px;
}
#Mig {
background-color: #ccc2a6;
height: 800px;
}
#Faerdigheder {
background-color: #3f5c93;
height: 800px;
}
#Projekter {
background-color: #ccc2a6;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Kontakt {
background-color: #3f5c93;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#logo {
height: 100%;
width: 200px;
background: url("Logo.png");
margin-top: 10px;
margin-left: 50px;
background-repeat: no-repeat;
position: absolute;
background-size: 200px;
}
<div id="all">
<nav>
<!-- navigations-element (menu) -->
<div id="logo"></div>
<ul>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Forside">
Forside
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Mig">
Mig
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Faerdigheder">
Færdigheder
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Projekter">
Projekter
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Kontakt">
Kontakt
</a>
</li>
</ul>
</nav>
<div id="Forside">
<br>
<br>
<br>
<br>
<br>Forside
</div>
<div id="Mig">
<br>
<br>
<br>
<br>
<br>
<div class="meleft">
<h1>Mig</h1>
<p class="textleft">Lots of words
</p>
</div>
<div class="meright">
<img src="sdp.png" alt="sdp" id="sdp1" />
</div>
</div>
<div id="Faerdigheder">
<br>
<br>
<br>
<br>
<br>
<div class="skillsleft">
<img src="Collage1.png" alt="Collage" id="Collage" />
</div>
<div class="skillsright">
<h1>Færdigheder</h1>
<p class="textright">Lots of words
</p>
</div>
</div>
</div>
I added my code to fiddle, so you can see the problem:
http://jsfiddle.net/9Lj6ck3L/
I hope you can understand the code even though some words is in Danish :-)
Given the HTML and CSS provided, set the width of the nav to calc(100% - 300px);
Demo Fiddle
Otherwise you are telling it to be the full viewport width, offset from the left by 150px which is why it seems to overspill to the right. Using calc you can say, "fine, stretch to the viewport width, but minus the margins"
Working fiddle - http://jsfiddle.net/9Lj6ck3L/11/
Changed width of your header bar.
nav {
position:fixed;
width:63.5%;
height:80px;
background-color:#FFFFFF;
opacity:0.75;
top:0;
left:0;
margin-left:150px;
margin-right:150px;
}
Hope this helps.
Your problem is position:fixed. This element does not inherit anything from it's parent in terms of width.
Your best bet would be to wrap the nav in another <div> and make that position fixed. Then give the <nav> inside it the width that you want.
Move the <nav> outside of the #all div and put your margins on #all instead of the body.
Then give your <nav> css of box-sizing: content-box or box-sizing: padding-box to solve the width issue.