Align ≪Div≫ Elements Side by Side

Align div elements side by side

Apply float:left; to both of your divs should make them stand side by side.

How to position three div elements side by side across a webpage

<div id = "container" style = "width:100%">
<div id ="left" style = "float:left; width: 25%;">
<?php echo $this->Html->image('/img/sideart.jpg'); ?>
</div>
<div id = "middle" style = "float:left; width: 50%;">

</div>
<div id = "right" style = "float:left; width: 25%;">

</div>
</div>

There is no such thing as float:center. By floating them all left they will line up next to each other.

How to place two elements side by side in one div?

So I found the answer and it was pretty simple :)
I just had to add one more div with class with which I will float it to left. This is what I wanted:

.html

 <div class="column">
<div class="columns">
<div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
</div>
</div>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>

.css

.float{
float:left;
}

That was it. It's working. :)

How to make two div align side by side?

You need to add display: inline-block on the elements you wish to align side by side, as div elements have a default style of display: block, meaning they will stack vertically instead of horizontally (not the behaviour you want).

From the looks of it; the shopping cart box is too wide to fit side by side in the content container as well. Make the div with the id centre wider (possibly to 1000px instead of 960px), and coupled with the addition of changing the display property, that should do it.

In terms of the code you need to write directly in order to get this to change, do the following:

#centre {
width: 1000px;
}

.cartbox {
display: inline-block;
}

EDIT: I modified these changes to your website locally and it appears to have worked.

enter image description here

How to position a set of div elements side by side?

You can set both divs to display: inline-block.

.form-group {
display: inline-block;
}

How to place div side by side

There are many ways to do what you're asking for:

  1. Using CSS float property:

 <div style="width: 100%; overflow: hidden;">
<div style="width: 600px; float: left;"> Left </div>
<div style="margin-left: 620px;"> Right </div>
</div>

Vertically align divs side by side at the bottom of their parent div

You can:

  • Display the items as inline-block to stack them horizontally.
  • Use vertical-align: bottom to align their bottom edge to the bottom of the line box.
  • Consider using white-space: nowrap to force them to stay in a single line box.
  • Place them inside an absolutely positioned inner wrapper with bottom: 0, i.e. placed at the bottom of its containing block.
  • Place that inner wrapper in a relatively positioned outer wrapper.

#outer-wrapper {  height: 0;  border: 1px solid;  position: relative;  margin-top: 70px;}#inner-wrapper {  position: absolute;  bottom: 0;}.item {  display: inline-block;  height: 30px;  width: 40px;  border: 1px solid blue;  vertical-align: bottom;}.bigger.item {  height: 50px;}
<div id="outer-wrapper">  <div id="inner-wrapper">    <div class="item"></div>    <div class="bigger item"></div>  </div></div>

Align div elements side by side using floats

First of all when you are dealing with Grid Based layouts, always make sure you use

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

/* Resets */
margin: 0;
padding: 0;
}

Note: * is nothing but a universal selector which will apply the
defined properties to every element. Inorder to target specific
elements, use more specific selectors like div.class_name etc

Now, why you need that?

If you see in the diagram below..

CSS Box Mode;

CSS adds margin, padding and border outside the box and not inside, which is default content box behavior, so when you use the snippet I shared, it changes the box model behavior and makes the element count the border and padding inside the element.


Coming to your issue, the CSS you provided is perfect, but position, float, or margin or even uncleared floating elements anything can cause the issue which you are facing, so if you can, consider altering your CSS stylesheet, and would be worth if you use box-sizing: border-box;


How do you achieve this?

Well, obviously, I won't provide you entire thing, but just a general idea of how to achieve this, as I see you are using width: 79%; now that's the very strong reason of why I suggested you to alter the box model.

Now here, I have two elements floated to the left, with the box model altered, so I don't have to use -1% width for any of the element. When you need spacing, nest more blocks inside the grid and then, instead of margin use padding especially on floated parent elements.

Demo

<div class="wrap">
<div class="left_wrap"></div>
<div class="right_wrap"></div>
</div>

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

/* Resets */
margin: 0;
padding: 0;
}

.wrap:after {
clear: both;
display: table;
content: "";
}

.wrap > div {
min-height: 300px;
}

.wrap .left_wrap {
width: 30%;
float: left;
border: 3px solid #f00;
}

.wrap .right_wrap {
border: 3px solid #000;
width: 70%;
float: left;
}


Related Topics



Leave a reply



Submit