I have this container div whose width I would like to set according to the widths of the inner divs. The issue I am facing is that the container div with auto width spans the entire page.
I have done a rough mock of what I would like (2nd implementation with constant width set) vs what I am getting with my auto settings.
http://jsfiddle.net/n3Q3n/1/
What do I do to get the div in the center without actually having to specify a width?
change display on all divs and remove the floats from left and right.
on all:
display:inline-block;
on container:
width:100%
or this
http://jsfiddle.net/n3Q3n/15/
please try this, its working well for me, hope it will resolve your issue:
add a property in following class
.container {
text-align: center;
}
from class .left & .right
remove {float:left & float:right} respectively and
add
{display:inline-block}
Related
I'm having trouble getting my divs to line up horizontally.
Here's my html doc: https://gist.github.com/Keenangp/9def2bd08eb6244bcf2d
I don't have enough rep to post the style sheet too, but it goes:
.container {
width: 80%;
margin: auto;
}
.column {
display:inline-block
}
.image {
display:inline-block
}
Here's the page: keenansportfolio.bitballoon.com/about
Some things I've tried while going through previous solutions here:
When I check the divs in Chrome dev tools, I see that the inline block property has been applied, and there are no errors in the console. I've tried removing the container rule, removing the container div, so the other divs aren't nested. I've tried using a smaller image, combining the property with float: left, and applying inline-block with the class>direct descendant as a selector. I've also tried each div by itself, and applying the vertical-align: top property in case the baseline was interfering with it, and opening it in different browsers.
This is for an exercise, and I wasn't told to edit any other values or add any other properties. I'm kinda stumped.
You want to align three columns in a row if I get it right.
You have to set width of each columns and sum of those are not supposed to exceed container's width. Set width for all three columns (ex:32%) and if you want to align them even if sum of their widths exceed the container's, add this property to container; white-space:nowrap.
You have to set 'div width' for "image","column" classes. For example,
.image, .column
{
display: inline-block;
width: 30%;
}
I have a container which has left and right padding. Inside this container are two divs which should be side by side with a space between. Now because this space is fix but the site is responsive, the two text-divs must have a dynamic width. This is the reason why I can't use %-width.
I thought with text-align: justify it will work, but it doesn't.
Here is the JSFiddle: http://jsfiddle.net/qGw48/
Here the JSFiddle how it should look like: http://jsfiddle.net/4ekSm/ (it only works because of the %-widths)
just change:
div#container > div {
display: inline-block;
}
to:
div#container > div {
display: table-cell;
}
UPDATED FIDDLE
This can be done fairly easily if you make the width value take into account the padding. So I'm using the style:
box-sizing: border-box;
http://jsfiddle.net/qGw48/1/
This means that when you set a width then the padding will be included in that value.
Have you seen this http://jsfiddle.net/cUCvY/1/
I think It solves what your looking for
Two Divs next to each other, that then stack with responsive change
you could add some margin to one of the boxes ie
.left{
margin-right: 5px;
}
I made a form and I am trying to center it on page but it doesn't work. I tried applying these 2 CSS to it but it didn't work.
form{margin: 0 auto;}
form{margin: auto;}
I also tried enclosing the form into div.container and applying same CSS to it but still nothing.
But this works:
{margin: 0 250px 0;}
Form here
You need to do two things to achieve this:
1) Change inline-block display on the form to be block.
2) Fix the width (you currently have it as auto).
Demo: http://jsfiddle.net/bMf9M/2/
Or if you don't want to fix the form size, you can use text-align: center (Thanks #donderpiet)
Demo: http://jsfiddle.net/bMf9M/4/
You have to specify the width of the container as elements with display:block property automatically size to the maximum width of their container.
You need to set a Width if you like to use margin:auto;
Your form has a property display: inline-block;, which makes it behave like an inline element. So you have to add text-align: center; to its parent to make it center horizontally. Like this: http://jsfiddle.net/bMf9M/4/.
Don't forget to set the form's text-align to left, otherwise it will have center-aligned text.
I am really struggling with this and I have no idea why. I want to have text and an image on 1 line and centered inside a 100% width div. Here's a jsfiddle..
http://jsfiddle.net/JnbeJ/
floated elements automatically become block-level. It's impossible to center them via text-align: center. The only way for you to do is to make them inline-block like so: display: inline-block. I added vertical-align: top; for the h to be at the top. The working example is here: http://jsfiddle.net/skip405/JnbeJ/4/
Your image and text can't float left and be centred at the same time...
You have a div that is 100% width (btw/ divs are 100% to begin with), and trying to center a div inside it that is also 100% width. You can either put a width on the inner div, or make it inline-block.
Updated fiddle.
You are using a wrapper with class name "centered" so instead of making both elements (display: inline-block;), just add this to style your wrapper:
.centered {display: inline-block; margin: 0 auto;}
You also have an additional (text-align: center;) in your containers css that does not need to be there.
I have 2 divs as columns, both are floated left and set to clear none. Their container div has a background image at the top, so the background is at the top of both columns.
I want to be able to also have a background image at the bottom of the columns. Ive created another div which sits inside the container div (but outside the columns) and set a background image to its bottom.
The problem is that this div doesn't extend to the bottom of the columns it contains. How can I make it do this? Ive tried playing around with floats and clearing but without any luck.
Thanks
In addition to the techniques the others already mentioned, you can add overflow:hidden to the parent container's style.
This is a very well known CSS quirk: here is a complete treatment: http://www.quirksmode.org/css/clearing.html
CSS:
div#test {
min-height:100%;
background-image: url('http://www.google.nl/images/logos/ps_logo2.png');
background-repeat: no-repeat;
background-position: bottom;
}
div#wrapper {
height: 500px;
}
HTML:
<div id="wrapper">
<div id="test">Blalalalalala</div>
</div>
This way you're div (#test) will have the height of his parent (#wrapper).
http://jsfiddle.net/F95xN/6/
Try removing the min-height: 100%; and you'll see.
Float elements do not count towards the height of a non-float elements. You can make the container div expand to include these floats in a couple ways:
Add float: left to the container div, too.
Or, add something like <div style="clear: both;"></div> to the end of the container div.
Or, use a more flexible clearfix technique.
Oops, I hadn't noticed but id set the height of one of the containers when I was wire-framing and forgotten it was there. Removing the height and floating the right div fixed this for me.
Thanks anyway.