CSS - Make Divs Align Horizontally

CSS - Make divs align horizontally

You may put an inner div in the container that is enough wide to hold all the floated divs.

#container {  background-color: red;  overflow: hidden;  width: 200px;}
#inner {  overflow: hidden;  width: 2000px;}
.child {  float: left;  background-color: blue;  width: 50px;  height: 50px;}

<div id="container">  <div id="inner">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>  </div></div>

How can I horizontally align my divs?

To achieve what you are trying to do:

Consider using display: inline-block instead of float.

How to position three divs in html horizontally?

I'd refrain from using floats for this sort of thing; I'd rather use inline-block.

Some more points to consider:

Inline styles are bad for maintainability
You shouldn't have spaces in selector names
You missed some important HTML tags, like <head> and <body>
You didn't include a doctype

Here's a better way to format your document:

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

Here's a jsFiddle for good measure.

CSS div align horizontal in same line

You are using display:flex; wrong. It needs to be applied to a parent container to work the way you are expecting it to. You'll need to add an extra div encasing the whole thing like this:

<div id="group">
  <div id="divbox1"></div>
  <div id="divbox2"></div>
  <div id="divbox3"></div>
</div>

After doing that, you will need to remove display:flex; from the inner divs. And add it to the grouping div. The resulting CSS should look something like this:

#group{
display:flex;
width:100%;
}

#divbox1{
flex:4;
margin-top: 5%;
margin-left: -25%;
position: relative;
border-style: solid;
border-color: #888888;
}

#divbox2{
flex:6;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
position: relative;
border-style: solid;
border-color: #888888;
}

#divbox3{
flex:4;
margin-top: 5%;
margin-left: 85%;
position: relative;
border-style: solid;
border-color: #888888;
}

Adding the flex:4; or flex:6; to each inner div is basically telling the flexbox what size you want your divs in relation to each other. Then, by default, flexbox will fit them to the width of the screen unless you have things like min-width on your divs.

Hope I helped. Cheers.

How can I horizontally center an element?

You can apply this CSS to the inner <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Horizontal and Vertical Align Div

May I suggest flexbox, the parent div will be set to that with justify content and align-items set to center. Then a child div with your html inside it will be centered.
https://css-tricks.com/centering-css-complete-guide/

.parent{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <div> your HTML here </div>
</div>

Align divs horizontally and perfectly fit the width of parent

The problem is with inline-block display style. It adds white-space between your elements.

Elements in the inline formatting context will cause white spaces from carriage returns and white-spaces in your HTML

quote from a comment to another question here on StackOverflow : inline-block

I also suggest you don't use fixed px width on the child elements. But use percentage. That way you are sure they will always stay 4 on one row.

FlexBox is the way to go when styling your layout. It's very easy to use and understand. Check here the docs -> FlexBox

That being said, check snippet below

.parent {  display:flex;  flex-wrap:wrap;  flex-direction:row;}.child {  flex: 0 25%;  height:100px;  background:red;  border:1px solid green;  box-sizing:border-box;}

<div class="parent">  <div class="child">
  </div>  <div class="child">
  </div>  <div class="child">
  </div>  <div class="child">
  </div></div>

How do I horizontally align 2 divs inside a parent div

If you make the cssBoxText a flex too and then apply some flex properties you should be able to do this without too many problems:

.cssBoxText {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

Alternatively if you add:

align-items: center;
align-content: center;

To .cssAward that should do it too.

Flex makes solving layout issues quite easy. You need to commit to using it though. If you start mixing flexbox with floats and vertical-align, text-align etc you may get unexpected results.

It's worth reading up on flexbox - it's really powerful.

CSS - How to align divs horizontally?

Giving white-space: nowrap to the body tag and display: inline-block to the div tag does the trick.

Working Fiddle

CSS - Make Divs Align Horizontally