I'm using HTML/CSS to make a website and on my home page I have some <div> tags that are inside <div> tags. I can't seem to get the inner <div> tags to align to the center of the outer <div> tags. Here is the HTML code i am using (the one with the stars next to it is the one that I want to align);
<div id="container">
<div align="center" id="box" style="background-color:black;width:375px;height:400px;border:0px solid #003300;">
<h1 id="heading"></h1>
<h2 id="otherheading"></h2>
**<div align="center" id="box" style="background-color:white;width:275px;height:225px;border:0px solid #003300;">**
<ul class="list-tick">
<li></li>
<hr>
<li></li>
<hr>
<li></li>
<hr>
<li></li>
<hr>
<li></li>
</ul>
</div>
And this is my CSS:
#container {
margin: auto;
width: 1125px;
}
#container div {
float: left;
height: 400px;
width: 375px;
}
Any help will be greatly appreciated. If you have further questions about the problem, I will try and explain in more detail.
Remove the floats, and add these
#container div {
margin: 0 auto; /* Center Horizontally */
height: 400px;
width: 375px;
}
Write this:
#box
{
margin-left: auto;
margin-right: auto;
}
There is no perfect way to center align content in css.
However you can use a little trick to solve this problem.
You can see my solution here: http://jsfiddle.net/kh7UT/
Ofc, you should not have the borders, they are simple there to demonstrate the trick.
It's not the most beutiful markup, but it works.
Try
div#box
{
margin-left: auto;
margin-right: auto;
width:275px;
}
Setting margin-left, margin-right to 'auto' will automatically adjust left and right for the container, i.e making it center.
Related
I'm trying to learn how to make various image sliders and the issue I'm running into is, I can not figure out how to align my image within my "image slider" properly.
I've tried numerous things and I'm just not understanding how to accomplish this.
The main div has a black bg color, the image slider div has a red bg color so i can see alignment. I've got the image slider centered and such but I can not get the image to center in the image slider itself. It sits uncentered on to the right currently.
https://jsfiddle.net/5gn40f3z/2/
HTML
<div id="sliderContainer">
<div id="slideWrapper">
<ul id="slide">
<li><img src="https://placeimg.com/800/300/any"></li>
<li><img src="https://placehold.it/800x300"></li>
<li><img src="https://placehold.it/800x300"></li>
<li><img src="https://placehold.it/800x300"></li>
<li><img src="https://placehold.it/800x300"></li>
</ul>
<span class="slideNav" id="previous"></span>
<span class="slideNav" id="next"></span>
</div>
</div>
CSS
#sliderContainer{
background-color: black;
max-width: 100%;
height: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#slideWrapper{
background-color: red;
width: 800px;
height: 300px;
margin: 0 auto;
}
#slideWrapper li{
list-style-type: none;
padding: 0;
maring: 0 auto;
}
How can I accomplish this?
You need to add the following CSS rules:
#sliderContainer {
font-size: 0;
}
#slide {
padding: 0;
}
Demo on JSFiddle.
font-size: 0 on container to eliminate offset from the top. It appears due to whitespaces in your HTML code. If those whitespaces will have height 0, they won't cause you trouble.
padding: 0 on your <ul> to eliminate offset from the left. <ul> is by default given a particular padding by most browsers More at W3Schools.
Your <ul id="slide"> tag still has a left padding defined in user agent styles. You need to reset it.
The following code will solve your problem, if you choose div.
<div class="container">
<div class="row">
<div class="col-md-12">
...
</div>
</div>
</div>
I dont really understand how is possible that a
<div style="clear:both"></div>
doesn't work in Chrome. I have this layout:
<div id="header">...</div>
<div id="content">
<div id="col1">...</div> <!-- float left -->
<div id="col2">...</div> <!-- float left -->
<div id="col3">...</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">...</div>
So, I've used the clear:both before the footer and/or after the col3.
It does not work either in IE7 but, in this moment I dont really care.
Can anyone help me please?
I Add more informations:
#content {
padding-top: 19px;
display: block;
}
#col1,
#col3 {
width: 21%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
#col2 {
width: 58%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
SOLVED: Im sorry.... the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow...
Hope i ve been clear in the explanation..
However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
It actually works. You are just not using it properly.
If you use clear:both the following element will be effected only. So for instance,
floated left | floated left | clear: both;
floated left | clear: left;
floated left | cleawr: right; | floated: left
Imagine that each text between "|" is a block element. If you float the elements and use the clear like the example above, the code should display something like above.
Check here for a live example: Try removing the clear attribute and you will see how the browser places "DOES NOT WORK".
http://jsfiddle.net/6VjSL/
clear:both works just fine in Chrome/IE7. See this example of how to properly use it. http://jsfiddle.net/turiyag/LvMRY/2/
Can you post a link to your site, or your full actual code?
CSS:
div {
border: 1px solid black;
}
.floaty {
height: 50px;
width: 50px;
float: left;
background: green;
}
.cleary {
height: 100px;
width: 200px;
clear: both;
background: cyan;
}
HTML
<html>
<head>
</head>
<body>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="cleary">Cleary</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
</body>
</html>
use clear:none; in the css property. It will work in chrome
Is better for semantic to use a class for this things. The correct way to go is:
HTML
<div id="header">...</div>
<div id="content" class="clearfix">
<div id="col1">...</div> <--- float left
<div id="col2">...</div> <--- float left
<div id="col3">...</div> <--- float left
<div class="clearfix"></div> <--- DOES NOT WORK
</div>
<div id="footer">...</div>
CSS:
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done.
Then it does not work anywhere ? :o)
You are probably applying the float:left to the clear:both divs too...
this works in all browsers:
http://jsfiddle.net/kKwkd/
HTML
<div id="header">aaaaaaaaaaaaaaaaaa</div>
<div id="content">
<div id="col1">bbb</div> <!-- float left -->
<div id="col2">ccc</div> <!-- float left -->
<div id="col3">ddd</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">xxxxxxxxxxxxx</div>
CSS
#header, #footer{
border: 1px dashed blue;
}
#col1,#col2,#col3{
float: left;
border: 1px solid red;
padding: 50px;
margin: 10px;
}
the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow... Hope i ve been clear in the explanation.. However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
Im trying to create a new master page without using a table and its causing me a headache.
Its very nearly there, I just need to make the 'Messages' and 'Content' divs full width so the 'Menu' div, plus the 'Messages' and 'Content' div are the same width (100% of the screen) as the 'Top' div.
I have set up a jsFiddle, can anyone give me some pointers?
http://i.stack.imgur.com/d1HO5.png
http://jsfiddle.net/CJRv5/
Im happy to change HTML a bit but the following must be considered:
menu is 130px wide, the rest of the content must fill remaining window width - no 960 grid!
Simplest (unintuitive) way, just change
#divMasterSubContainer
{
float: left;
...
to
#divMasterSubContainer
{
overflow:hidden;
...
http://jsfiddle.net/CJRv5/2/
Ref http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
^ you need to make sure that the width of menu + width of messages/content is not more than the width of the container in which they reside. Do something like this
div { border: 0; margin: 0; padding: 0;{
#content {
width: 100%;
}
.clear-both { clear: both; }
.float-left { float: left; }
#menu { width: 20%; }
#main { width: 80%; }
<div id="content">
<div id="menu" class="float-left">
<p>menu</p>
</div>
<div id="main" class="float-left">
<div id="message"><p>messages</p></div>
<div id="content"><p>content</p></div>
</div>
<div class="clear-both"></div>
</div>
So I have a bunch of elements that need to have a specific width, height and padding and need to be centered within their parent element:
<div class="pages">
<a>Page 1</a>
<a>Page 2</a>
<a>Page 3</a>
</div>
How do I do this? I don't know how many elements there will be so .pages can't have a defined width so margin:auto; won't work.
In the stylesheet or style tag:
margin-left: auto; margin-right: auto
You can wrap all those in one single div and center this one, this will be the usual approach I believe.
<div id="wrapper" style="margin-left:auto; margin-right:auto">
<div id="page1"> ... </div>
<div id="page1"> ... </div>
...
</div>
If you have working code, please post it.
It sounds like what you're looking for is margin: auto on the elements you want to center, like so:
#my_div {
margin: auto;
}
CSS CODE
div {
display:table-cell;
width: 200px;
height: 200px;
vertical-align:middle;
background: red;
}
HTML CODE
<div>
Hello...This is Vertically Centered!
</div>
<div>
Hello...2!
</div>
<div>
Hello...3!
</div>
SAMPLE DISPLAY
Is it possible to make a nested structure of divs
<div>Content1
<div>Content2
<div>Content3</div>
</div>
</div>
to look like divs with fixed width that float left?
<style>
div {
float: left;
width: 200px;
}
</style>
<div>Content1</div>
<div>Content2</div>
<div>Content3</div>
I guess you can't do it with CSS. It's a language for defining the style of elements, not for modifying their structure. You could think about jQuery or XSLT for your case.
you can use margin-top property to get this effect
<div style="width:100px;height:100px;border:1px solid black">
<div style="width:100px;height:100px;border:1px solid green;margin-top:100px">
</div?
</div?
Actually you don't need to do anything really, this is the default behavior for block level elements.
Try to create a blank html page and insert the lines
<div>Content1
<div>Content2
<div>Content3</div>
</div>
</div>
Without any form of styling the output will be:
Content1
Content2
Content3
Which is what you are asking for
I guess I figured how to do that with a bit of additional html and absolute positioning:
<div id="parent">
<div class="nest">
<div class="content">One</div>
<div class="nest">
<div class="content">Two</div>
<div class="nest">
<div class="content">Three</div>
</div>
</div>
</div>
</div>
//css:
#parent {
position: relative;
}
div.nest {
position:absolute;
width: 200px;
top: 0;
left: 200px; /*should be same as width */
/* the next is the tricky part */
margin: 0px;
padding: 0px;
border: 0px;
}
/* apply custom border, padding and margin here */
div.content {
border: 1px solid #ccc;
padding: 8px;
margin: 4px;
}
Color me noobish, but couldn't you achieve something similar with an unordered list, since you're looking to nest elements? (http://jsfiddle.net/xDJAY/) Not sure if this is the structure you're looking for though.