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.
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:
- 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 likediv.class_name
etc
Now, why you need that?
If you see in the diagram below..
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 now that's the very strong reason of why I suggested you to alter the box model.width: 79%;
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 use margin
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
Make a Scrollbar Always Visible in a Div - Chrome
How to Remove Border of Drop Down List:Css
Canvas Has White Space At the Bottom and Scrolls Too Far
How to Vertically Align an Image Inside a Div
Complex CSS Selector For Parent of Active Child
Using Regular Expression in Css
How to Use Jsf Generated HTML Element Id With Colon ":" in CSS Selectors
Add a CSS Border on Hover Without Moving the Element
Css Property Border-Color Not Working
Swap Div Position With CSS Only
How to Fill Html5 Input[Type=Range] on the Left Side of the Thumb With CSS Only
How to Prevent Long Words from Breaking My Div
Media Queries: How to Target Desktop, Tablet, and Mobile
When to Use Margin VS Padding in Css
Any Way to Declare a Size/Partial Border to a Box
Difference Between Style = "Position:Absolute" and Style = "Position:Relative"