I have a problem on my responsive homepage. When the page is less than 1024px wide, I want the two contents widgets below each other and horizontally aligned. I defined their width and tried to center them with margin: 0 auto, but they stay at the left.
This is the link: http://readyforsolutions.be/wordpress/
This is my HTML:
<div class="home-left">
<h1 class="widgettitle">Title</h1>
<p>Text</p>
<div class="homebuttonbox"><a class="homebutton" href="http://readyforsolutions.be/wordpress/logistieke-problemen-quick-scan/">Doe de Quick Scan</a></div>
</div>
<div class="home-right">
<h1 class="widgettitle">Title</h1>
<p>Text</p>
<div class="homebuttonbox"><a class="homebutton" href="http://readyforsolutions.be/wordpress/logistieke-problemen-quick-scan/">Doe de Quick Scan</a></div>
</div>
This is my CSS:
.entry-content {
width: 100%;
}
.home-left {
width: 100%;
float: none;
display: block;
margin: 0 auto;
}
.home-right {
width: 100%;
float: none;
display: block;
margin: 0 auto;
padding-top: 120px;
}
Any help is appreciated!
Thanks,
Stefaan
Modifying the display and margin parameters of the container DIV tag may do the trick:
HTML:
<DIV class="entry-content">
<div class="home-left">
<h1 class="widgettitle">Title #1</h1>
<p>Text</p>
<div class="homebuttonbox">Content Box #1</div>
</div>
<div class="home-right">
<h1 class="widgettitle">Title #2</h1>
<p>Text</p>
<div class="homebuttonbox">Content Box #2</div>
</div>
</DIV>
CSS:
.entry-content {
margin-left: auto;
margin-right: auto;
border: 5px black solid;
text-align: center; }
.home-left {
float: none;
margin: 0 auto;
border: 1px red solid;
display: inline-block;
text-align: left;
}
.home-right {
float: none;
margin-left: 0px;
border: 1px blue solid;
display: inline-block;
text-align: left;
}
Other Resource:
CSS Centering
Example:
CodePen Example
Related
I know this has been discussed in length, but I cannot seem to find an answer to solve this problem. This is a simple example to illustrate my issue. I have two children div elements inside a parent div and I want them to be horizontally centered inside the parent div. Here is the fiddle:
JSFiddle
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
}
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: 1.5em auto;
}
<div id="container">
<div class="tile">
<!--
When you remove this comment, the div shifts down and I do not understand what is causing that.
<h3>This Title Moves the div down. Why?</h3>-->
</div>
<div class="tile"></div>
</div>
Now is there a simple solution that I am missing? Also, I have a secondary question about the h3 tag as well. When the comment around the h3 tag is removed, the first div shifts down. What about the h3 tag is causing the div to shift down and how do I prevent it from happening?
Thanks for your answers and your help, and I apologize for a potential repeat question.
Add below code to #container:
display: flex;
justify-content: center;
align-items: center;
Live Snippet
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: 1.5em 0;
}
<div id="container">
<div class="tile">
<!--
When you remove this comment, the div shifts down and I do not understand what is causing that.
<h3>This Title Moves the div down. Why?</h3>-->
</div>
<div class="tile"></div>
</div>
You can add: .title { display: block; }
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
}
.tile {
border: 1px solid black;
display: block;
height: 40em;
margin: 1.5em auto;
width: 20em;
text-align:justify;
padding:7px;
}
h3 {
margin: 0;
padding: 0;
}
<div id="container">
<div class="tile">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="tile">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
</div>
you can add margin:auto to .tile and text-align:center to #container
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
text-align: center;
}
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: auto;
}
<div id="container">
<div class="tile">
<h3>This Title Moves the div down. Why?</h3>
</div>
<div class="tile"></div>
</div>
When you use display:inline-block by default was vertical-align: bottom; so that set css for .tile to vertical-align: middle; and text-align:center to #container
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: 1.5em auto;
vertical-align: middle;
}
Working Code: https://jsfiddle.net/e8on1cko/5/
` `
#container {
padding:25%;
text-align:center;
background:#e7e7e7;
}
.tile{
background:white;
display:inline-block;
padding:20%;
}
<div id="container">
<div class="tile">
<h3>This Title Moves the div down. Why?</h3>
</div>
<div class="tile"></div>
</div>
I am trying to achieve something that looks like this:
I don't know how many green elements will be rendered, because that is determined by the CMS and how many components the author decides to put in there.
The requirement is that there are 5 boxes per row before it wraps.
The problem is: margin: auto doesn't work when I set the red wrapper to inline-block.
div.container {
background: black;
padding: 10px;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
div.container {
background: black;
padding: 10px;
text-align: center;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
just add text-align center to div.container
As Muhammad Usman suggested, add text-align: center to .container. The text-align-property always refers to the content of the target element.
div.container {
background: black;
padding: 10px;
text-align: center;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
Give the container div this property
text-align: center;
Here's a fiddle
Centering with margin: auto doesn't work for elements that have inline-block as display property.
You can, however, just center such elements by setting the text-alignment of their parent elements to center. Then, (re)set the text-alignment of the elements you want to center to whatever text-alignment you need there.
Demo
.container {
background: black;
padding: 10px;
text-align: center; /* Center */
}
.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
text-align: left; /* Reset alignment */
}
.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
See also this Fiddle!
I want to gain the below layout:
It seems that when the right box is small, the bottom left box wants to move away from the left side and beside the top left box. If the right box is full and tall, then it pushes the bottom left box back to where I want it to be.
HTML
<div class=page>
<div id="stack-vert">
<div id="stack-horz">
<div id="message_center_content">
<h2> Your Messages </h2>
</div>
<div id="message_center_details">
</div>
<div id="message_center_details">
</div>
<div id="clearingdiv2"></div>
</div>
</div>
CSS
.page{
margin: 2em auto;
width: 75em;
border: 5px solid #ccc;
padding: 0.8em; background: white; display:table;
}
#message_center_details{
float:left;
border: solid thin black;
overflow:hidden;
padding: 5px;
width: 25%;
background-color: #ffffcc;
margin: 5px;
}
#message_center_content{
float:right;
border: solid thin black;
padding: 5px;
width: 60%;
background-color: #F0F0F0;
margin: 5px;
}
JS Fiddle
It works in jsFiddle, but now in my browser! Instead the two boxes on the left interfere with each other, the bottom one sits to the right of the top one and below the box on the right.
Any help would be really appreciated.
Something you could do
<div id="Container">
<div id="left">
<div class="section">
</div>
<div class="section">
</div>
</div>
<div id="right">
<div id="message">
<div style="width:100px;height:260px;background:white;">Edit this</div>
</div>
</div>
</div>
#Container {
width: 100%;
min-height: 300px;
background: red;
}
#left {
float: left;
width: 40%;
background: yellow;
min-height: 300px;
box-sizing: border-box;
padding: 10px;
}
.section {
width: 100%;
display: block;
min-height: 120px;
background: red;
box-sizing: border-box;
margin-bottom: 10px;
}
#right {
float: left;
width: 60%;
min-height: 300px;
background: blue;
box-sizing: border-box;
padding: 10px;
}
#message {
width: 100%;
min-height: 200px;
background: red;
}
see fiddle for what i would do. I have added colors so you can see whats happening.
adjust the white div height in the HTML tab to see the message div (the red one on the right) adjust its height.
Your content would just go inside the left divs with a class of section, and the right div id message.
I would stay away from libraries until you know how to do most things yourself.
Great place to learn html/css/js and more
You are maybe after such a solution to have two outer divs side-by-side:
.wrapper{
width: 90%;
margin: auto;
display: flex;
justify-content: space-between;
}
.side{
width: 30%;
}
.side div{
margin-bottom: 10px;
padding: 10px;
}
.side div:last-child{
margin-bottom: 0;
}
.main{
width: 67%;
}
.main div{
padding: 10px;
}
.border{
border: 2px solid black;
}
<div class="wrapper">
<div class="side">
<div class="top border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
<div class="bottom border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
</div>
<div class="main">
<div class="border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
</div>
</div>
Really can't figure out what's wrong with it, but all the content I add into div, goes out of it, just like it's not in it.
Check it here: JSFiddle!
HTML___
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
</div>
</div>
</div>
CSS___
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
}
#logo {
float: left;
}
You need to clear your floats:
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT NOW APPEARS INSIDE DIV :)
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
Because you've floated your logo, any content following it will wrap around it. Which is what is causing the effect you're seeing.
Add overflow:auto to your #header div to restore the expected behavior:
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
overflow:auto;
}
jsFiddle example
Floating the child essentially removes it from the flow and the parent collapses. Adding the overflow rule gives you the behavior you expected.
I'd urge you to use flex. It's quite robust and lets you create any kind of layout you want without any issues really. I've added a menu to the right hand side just to illustrate your logo in actual context.
<!-- HTML -->
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
<div id="content-menu">
<div id="menu">
Home
Contact
About
About
</div>
</div>
</div>
</div>
</div>
Corresponding CSS:
/* CSS */
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
margin: 1.2em auto;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
display: flex;
}
#logo { flex: 1; }
#content-menu { flex: 4;}
#menu { display: flex; }
#menu > a {
display: inline-block;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #000;
flex: 1;
}
I have placed two divs inside a container tag. The container simply centers and fixes the content.
I want to have space at the bottom of the site, between home-segment and the bottom of the browser. For some reason however, the bottom-spacer floats above home-segment. How can I move it down below home-segment?
<div class="container">
// Content
<div class="home-segment">
<div class="col w33 col-first">
<h2>A title</h2>
<p>Lorem ipsum.</p>
</div>
<div class="col w33">
<h2>Hey there.</h2>
</div>
<div class="col w33 col-last">
</div>
</div>
<div class="bottom-spacer"></div>
</div>
CSS:
/* Home Page Columns */
.home-segment { width: 830px; float: left; }
.col-first { margin-left: 0 !important; }
.col.w33 { width: 220px; min-height: 200px; max-height: 200px; border: 1px solid #D9D4D4; background: #fff; margin-right: 15px; }
.col.w33 h2 { font-size: 18px; margin-bottom: 10px; }
.col-last { margin-right: 0 !important; }
.col { display: block; float: left; position: relative; overflow: hidden; padding: 10px; }
.bottom-spacer { padding-bottom: 25px; }
It is shifting to the top as you are not clearing your floated elements
Add clear: both; to .bottom-spacer
.bottom-spacer { clear: both;padding-bottom: 25px; background: #f00;}
Demo
For detailed explanation for the behavior, you can refer my answers here and here