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
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.
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 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.
<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.
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?