I know it should be a fairly easy thing to do but for some reason I'm having issues with it and not sure why. I'm adding a controller under the gallery that you can use to scroll through the slides and need to it be centered.
This is what the code looks like ATM:
<div class="control_wrap" style="">
<div class="gallery_controls" style="">
<a target="_blank"></a> <a target="_blank"></a> <a target="_blank"></a>
</div>
</div>
CSS:
.control_wrap{
float:left;
width:100%;
}
.gallery_controls{
margin:0 auto;
float:left;
width:50%;
}
Let me know if you need anymore information.
Thanks.
You have to get rid of the float: left on .gallery_controls. margin: 0 auto won't work otherwise.
Try to remove float left from this class:
.gallery_controls{
margin:0 auto;
/*float:left;*/
width:50%;
}
Change your CSS to something like this:
.control_wrap {
float:left;
width:100%;
}
.gallery_controls {
margin:0 auto;
float: left;
text-align:center;
width:50%;
}
Result http://jsfiddle.net/AmAMP/1/
I have updated see your CSS please check it:-
.gallery_controls{
margin:0 auto;
width:50%;
height:50px;
background:red;
}
or you can see the live example for easier understanding :-
http://jsfiddle.net/cPk53/5/
in order for margin:0 auto; to work, you have to specify a width on that div and omit the float.
If you also want to vertically center your div, you need either position:absolute on the div, or display:table-cellon the parent div with vertical-align:middle.
Something like this:
parent{
position:relative;
}
child{
position:absolute;
top:50%;
left:50%;
width: <your-width>;
height: <your-height>;
margin-left: <your-width> / 2;
margin-top: <your-height> / 2;
}
Example fiddle
Use Tables instead. With div the look and feel would vary from browser to browser. The moment you feel that you have done it, loading in another browser or an older version of the browser will break your illusion.
Related
I have div inside a div (.konteineris2 and .feedback). When I use left:-200px in .feedback class, fixed div suddenly appears in the very left side of screen, outside .konteineris2. All I wanted it to move for 200px to the left outside .konteineris2, but not appear to the left screen border and then move 200px from that point.
HTML:
<div class="konteineris2">
<div class="feedback">
</div>
</div>
CSS:
.feedback{
position:fixed;
top:220px;
width:100px;
height:200px;
background:white;
}
.konteineris2{
width: 960px;
height:700px;
position:absolute;
top:460px;
padding-top:30px;
pointer-events:none;
overflow:hidden;
}
Any ideas how to manage it?
change position:absolute; to position:relative; in .konteineris2
Add margin-left: -200px; in .feedback
Check it on CodePen . I think you're looking for the same thing.
Without seeing more of the context in which this occurs I'd guess the following might achieve your goal: Try adding margin-left:-200px instead.
I have 2 divs and I wanted to resize images inside in those divs but they should allways fill div and constrain proportions.
Like this one:
http://www-07.ibm.com/sg/60/
If you try to resize them, they will allways fill their divs and images will allways keep their proportions.
HTML:
<div class="one">
<img src="imgs/photo1.jpg" class="photo1">
</div>
<div class="two">
<img src="imgs/photo2.jpg" class="photo2">
</div>
CSS:
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
}
.two{
position:relative;
overflow:hidden;
width:50%;
height:50%;
float:left;
}
How do I style those images to look like this?
http://www-07.ibm.com/sg/60/
Site is using jquery plugin for the effect, however you can get the same by css3 background-size:cover property.
What you have to do is :
Remove source image and give it through background and use background-size:cover.
<div class="one">
</div>
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
background: url("path to image") no-repeat center center;
background-size : cover;
}
I could be missing something here, but if I understand your question correctly, you can just add:
width: 100%;
to your img tags and they will always fill the containing div.
Try this,
.one img, .two img {
width:100%;
height:auto;
}
I think you would get the best result by not using the tag, but instead make these background images with the attribute:
background-size:cover;
background-position:center;
I have two divs: left and right. In the left there is a long text. In the right there are some annotations about the text (more divs). If the text of the left is longer than the annotations I'm like it. But when the annotations are bigger/longer then the left div, I want to make the right div's content overflow.
With other words: two divs without fix height, make overflow the right one.
The code is above or JSFiddle
<div id="container">
<div id="left">Some long-long text, allways to show</div>
<div id="right">Some divs not necessarily show all</div>
</div>
css:
#container {
background-color:white;
float:left;
}
#left {
width: 79%;
float:left;
}
#right {
width: 19%;
float:right;
overflow: hidden;
}
But it's not working. :(
As Jan suggested in his last comment, I think you need to use javascript or jQuery to accomplish this.
This question outlines an approach using javascript that was accepted by the OP, though the OP made no comments on his process of execution.
I've modified a js fiddle from this answer to a similar question.
It uses the following:
CSS
#main{
width:auto;
}
#one{
height:auto;
width:200px;
display:inline-block;
float:left;
}
#two{
height:100%;
width:200px;
float:left;
display:inline-block;
overflow: auto;
}
div{
border:1px solid black;
}
Javascript
$(document).ready(function() {
$("#main").css("height",$("#one").height());
});
And I believe addresses your desired outcome.
You have to use overflow: hidden on #left, and not on #right.
Dear Friends I am so struggling on about a problem came to me in my web design.
My layout as follows,
<div class="main_div">
<div class="left_column">
<div class=="fixed_div"></div>
</div>
<div class="mid_column"></div>
<div class=="right_column"></div>
</div>
and css file look like
.main_div{
float:left;
width:80%;
}
.left_column{
float:left;
width:20%;
}
.mid_column{
float:left;
width:40%;
}
.right_column{
float:left;
width:20%;
}
What i wanted to do is i need to make the fixed_div fixed inside the parent element and give the width to 100%. But it always comes out of the left_column. How would i overcome this problem please help. Thanks
Please note that sometimes i am changing left_column's width from jquery.So at that time the fixed_div must also adjust as the left_column.
For block elements your issue is fixed by default cos they have width: auto;. Do not adjust #fixed_div width at all and it'll work.
P.S. Using IDs for selecting all elements in css - isn't a good style, better rework it to the classes.
You have floated all elements for this you must use clearfix technique to remove any error. And set .fixed_div to display: block; . If this do not help you please place a Demo. What actually you have been in problem.
This should help:
.fixed_div {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.left_column {
position: relative;
float:left;
width:20%;
}
I want to center the speaker div, which is within the review div. i cannot seem to get it working. :(
HTML:
<div class="review">
<div class="speaker">
<p>SPEAKER DIV</p>
</div>
</div>
CSS:
.speaker{
align:center;
}
This doesn't work :/
Give it a width and margin:0 auto;
<div class="review">
<div class="speaker">
<p>SPEAKER DIV</p>
</div>
</div>
div.speaker{
background-color:red;
width:100px;
margin:0 auto;
}
See it in action!
There’s no such CSS property as align.
When you say you want to “center” the speaker div, what exactly do you mean?
You can center-align its text like this:
.speaker {
text-align:center;
}
(See http://jsfiddle.net/pauldwaite/X7LN5/)
If, alternatively, you want the speaker div to only be as wide as its text, and be positioned in the center of the review div, then you’d need to use this:
.review {
text-align:center;
}
.speaker {
display:inline-block;
}
(See http://jsfiddle.net/wxha4/)
I'm about a year late to the party, but here goes:
In most browsers, this will work:
.speaker{
margin: 0 auto;
}
However, in IE8 and below, the margin:auto will not work (IE8 only if there is no !DOCTYPE declaration. See W3Schools Horizontal-Align Tutorial)
In that case, you can use a combination of text-align: center and width to get the desired effect:
.review{
text-align:center;
}
.speaker{
text-align:left;
width:200px;
margin:0 auto;
}
The downside to this method is that you have to declare a width, or it won't be centered.
Good luck!
It work perfectly.
.speaker{
margin: 0 auto;
text-align:center;
width:100%;
}
good luck
Give the parent a text-align: center;
Then you can move the child anywhere in the parent div
.speaker {
margin: 0 auto;
try
.speaker p{
text-align:center;
}
or
.speaker {
text-align:center;
}
There is no align attribute in CSS. Set the horizontal margins to auto to centre a block. See Centring using CSS for more details (including work arounds for Internet Explorer issues)
Thats because that syntax does not exist. You need to center the div via the margin attribute.
.speaker{
margin:0px auto 0px auto;
}
DEMO http://jsfiddle.net/t4kBj/