margin:auto not working with width:auto - html

I want to first div be center.
margin:auto not working with width:auto.
width value must be auto
<div style="display:block;margin:auto;width:auto">
<div style="background-image:url(assets/img/asd.png) "></div>
<div style="background-image:url(assets/img/abc.png)"></div>
<div style="background-image:url(assets/img/asd.png)"></div>
<div style="background-image:url(assets/img/asd.png)"></div>
</div>

you can't. Obviously you are trying to center these images. Just use this instead:
<div style="text-align: center;">
<div style="display: inline-block;background-image:url(assets/img/asd.png) "></div>
<div style="display: inline-block;background-image:url(assets/img/abc.png)"></div>
<div style="display: inline-block;background-image:url(assets/img/asd.png)"></div>
<div style="display: inline-block;background-image:url(assets/img/asd.png)"></div>
</div>
And it would be better to use classes and a stylesheet instead of inline CSS....

You can't.
Your outer div is 100% wide and it fills the entire window, which makes it pointless to be centered.
Rather, you should maybe wrap a container around your code which has a width in either px or % and set margin: 0 auto; on that. And your code inside would then be set to width: 100%;
If, on the other hand you would want your content inside to be centered, use text-align: center;

Related

How to make a div fill entire height of outter div and vertically align in the center?

I have a similar html to the one bellow (i use external stylesheets but in this example I don't to make it easier to read).
The "bigger" div dynamically gets multiple lines of text, while the "smaller" always has just one line. However, I want the text in the "smaller" div to vertically align exactly in the middle on the left side of the "bigger" div. I can't use display:table and display:table-cell because I use jquery slidedown function to show the "wrapper" div and that forces the "wrapper" to be display:block.
Any help on how to do this would be appreciated.
<div class="wrapper">
<div class="smaller"style="float: left; min-height: 100%;">
<p style="vertical-align: middle;">Heading</p>
</div>
<div class="bigger" style="float: right;">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
Please avoid inline styles. You have classes, use them! Also there is no vertical-align:center. Take a look here:
html
<div class="wrapper">
<div class="smaller">
<p>Heading</p>
</div>
<div class="bigger">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
css
.wrapper{
display: table;
}
.smaller{
min-height: 100%;
display: table-cell;
vertical-align: middle;
width: 97%;
}
.bigger{
height: 100px;
display: table-cell;
}
You can use display:table and display:table-cell to achieve this.
fiddle
You don't want .bigger to float, because .wrapper relies on it for the height. Try something like this fiddle.

Centering a div that contains images whose size is relative to the page width

I've tried the solutions in other threads, but I'm at a loss.
I'd like two images, side by side, each one's width equal to 40% of the page width, and with 20px of margin between them, and the whole wazoo should be centered.
Diagrammed approximately:
| [img1 width:40%] 20px space [img2 width:40%] |
I've gotten very close, but nothing quite works.
Here's the closest I've gotten:
<!-- Starts centering with the addition of "width" to the div's style. -->
<div style="margin: 0 auto;">
<img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block;">
<img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block; margin-left: 20px;">
</div>
This code on JSFiddle: http://jsfiddle.net/98Se3/
It resolutely refuses to center without that div having a specified width. However, the width of the div can neither be set relative to the page width, or exactly in pixels, because it should be 40% + 20px + 40%.
What am I missing?
Just use text-align:center for the parent div:
<div style="text-align:center">
<img width="40%" src="http://bit.ly/1mlbOp6">
<img width="40%" src="http://bit.ly/1mlbOp6" style="margin-left: 20px;">
</div>
Check out this working fiddle
Are you looking for something like this fiddle
<!-- Starts working (approximately) with the addition of "width" to the div's style. -->
<div style="margin: 0 auto; width:100%">
<img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block;"><img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block; margin-left: 20%;">
</div>
Updated margin-left: 20%; instead of margin-left: 20px;
And there is no gap between <img ...><img ..>
<div style="text-align:center">...</div>
This way the content is centered, the div uses full width but unless it needs to be visible (border, background-color, ...) it does not visually matter.
That last part may be solved by setting a <span> around the images and style that.
Use text-align:center; instead margin:0 auto;
<div style="text-align:center;">
DEMO

Cannot center div tried floating to left text align margin:auto just wont work

Cannot center div tried floating it and using text-align:center; margin:auto doesn't work please help me I can't figure this out. I will paste the code and a link for the jfiddle.
It looks fine in Jfiddle but it actually isn't I don't know why. I'm using Chrome
Fiddle
<div class="wrap">
<div class="top_portion">
<div class="logo">
<img src="img/2a685fsaq.png"/>
</div>
</div>
<div class="center">
<div class="cleft_portion">
<img src="img/5.png" />
</div>
<div class="mid_portion">
<img src="img/css.png" />
</div>
<div class="cright_portion">
</div>
</div>
<div class="bottom_portion">
</div>
</div>
I think i gave the same solution, in this question of your Can't get right portion of middle to stay on the right ...considering your markup display:table is a better option (if you can ignore IE8-)
display:table is compatible(IE8+) overall with minimal css
see demo here
HTML
<div class="center" style="display:table">
<div class="cleft_portion" style="display:table-cell">
</div>
<div class="mid_portion" style="display:table-cell">
</div>
<div class="cright_portion" style="display:table-cell">
</div>
</div>
I have removed the floats and added table display...its better if you are looking for IE8+ browsers!!
EDIT
considering your current markup, these might be faults
.center {
margin: 0 auto; /* u have mentioned only auto here */
width:1200px;
}
and add this on top of your css :
html, body {
width:100%;
height:100%;
}
working demo
make the width 100%
go to that div you want to center and write:
width:100%
or play a bit with the widths so that it centers itself
Leave text-align:center and margin:auto;
if it's still not centered you can always play with margin-right/left as long as it UNDER the margin: 0 auto;
also if you are going to do a float best have:
overflow:hidden;
and play with the height as not to have overlappings
text-align:center will not work as you are using images in your code.
if you wish to use margin:0 auto you should have to give a width to the container which you want to be in center, as the container by default takes the width of the container and margin:0 auto applied cant be seen.

How to make second adjacent div have auto width that fills the parent container

<div class="parent clearfix" style="width:100%; height: 100px">
<div style="float: left; width:150px; height: 50%">
</div>
<div style="float: left;" class="target">
</div>
</div>
I would like to make class 'target' div be such that it's width is 150px less than the width of the div with class 'parent clearfix'
How do I accomplish this? In the above example the parent div is the child of another div which has a specified width (bit this specified width can change).
You may use display: table for the parent and display: table-cell for the children (Fiddle).
<div style="width:100%; height: 100px; display: table">
<div style="display: table-cell; width:150px; height: 50%">
</div>
<div style="display: table-cell;">
</div>
</div>
But it will not work in older browsers.
Update
Another way is to give a margin-left: 150px to the second column and a position: absolute to the first. This will work in most browsers, but of course it's not a clean version and you'll come in trouble if the first columns content is longer than the second ones. Fiddle.
It should be just
width: calc(100%-150px)
Supported in only CSS3 supporting browsers
Take a look at http://alistapart.com/article/holygrail for a semi-fluid layout. I think this is exactly what you are looking for.

Float div's to the right in left-to-right order?

I have multiple div's I want to display in a horizontal row. Normally, the way I'd do this is to simply float them to the right and put them in the markup in reverse order like so:
<div>
<div style="float:right">Right</div>
<div style="float:right">Middle</div>
<div style="float:right">Left</div>
</div>
I'm trying to accomplish a similar thing, float div's to the right, but I can't reverse their order in the markup for SEO reasons. The left div needs to be first in the code.
Is there a simple way to do this without resorting to positioning things absolutely?
You could apply a text-align: right to the container and a display: inline-block in place of the floating:
<div style="text-align: right">
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
DEMO
Using display:inline-block might not work as expected with elements of variable height.
So you might want to use:
<div style="float: right">
<div style="float:left">Left</div>
<div style="float:left">Middle</div>
<div style="float:left">Right</div>
</div>
See: demo of both -- inline and float-float.
You could give float: right to the outer div. And the display style of the inner div is inline-block
<div style="float: right" >
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
Float your elements to the left.
<div>
<div style="float: left; position: relative; width: 200px;">Left</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Middle</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Right</div> <!-- dummy width -->
</div>
Also, you'll need to specify the width for each of these divs.
What is your reasoning behind floating them to the right?