I have 6 divs that will hold images for products and I want them side by side in rows of three but then I want that centered.
This is the code I created for the parent and its all perfect apart from them being central.
<div id="parent" style="display:inline-block; margin:0 auto; width:730px">...</div>
As you can see, the divs are aligned left when compared with the horizontal rule..
Here is all of my code:http://jsfiddle.net/FNkUP/
Remove the "display:inline-block" property, and it will work well. or make it "display:block".
div id="parent" style="display:inline-block;/*no need of this*/">...</div>
For text align check this fiddle
just add this to your css
#parent
{
text-align:center;
}
or change the parent style tag like
style="display:inline-block; margin:0 auto; width:730px; text-align:center"
See your updated FIDDLE
Related
I think this may be a old question but I am difficult to find a answer.
I have one parent div and two child divs in it using display:inline block ( for tabular structure.
I want to have a vertical line between two child divs so i added another child div as divider div.
The way it should work is - if any child div has more content then there should be vertical scroll bar in parent div.
Now the issue i am having is - when i am getting a scroll bar in parent the divider div is not touching the bottom border of parent div. there is a gap. I need it to be touched to bottom all the time.
HTML
.container {
border:1px solid red;
display:block;
width:200px;
height:100px;
overflow-y:auto;
position:relative;
max-height:400px;
}
.column {
width:49%;
display:inline-block;
vertical-align:top;
position:relative;
margin: 0;
padding: 0;
}
.divider{
position:absolute;
left:50%;
border-left:1px solid red;
height:100%;
display:inline-block;
max-height:auto;
}
<div class="container">
<div class="column">
Test Test Test Test
Test Test Test Test
Test Test Test Test
Test Test Test Test
</div>
<div class="divider">
</div>
<div class="column">
Test
</div>
</div>
Any help would be much appreciated...
Well, everything it's working fine. basically you give the divider a 100% height, and that means 100% height of his parent which is set to 400px. That div can't understand that's there's content overflowing in the column unless you yo use javascript (or jquery) to know previously the real height of the column and set that height to your "divider".
What I can see as the best and fastest fix... why don't you use border-right insteed of using a div? FIDDLE
.column {
border-right:1px solid red;
}
Edited: Well, as you have commented that your right column may have a higher height that the left one... you could also give your right column a border-left however that could be messy if you dont use border-boxon your divs (which I do recomend you to get use for every single project. if you not familiar with it here you have it very well explained: https://css-tricks.com/box-sizing/).
Then after adding border-box to your containers, you can easily add the border-left to the right one, move it 1px (or whatever width you want to set up) to the left with margin and both borders will overlap.
Oh, and I have changed the inline-block to float insteed as inline-block elements always leave a little space between them and obviously you don't want that space in this example.
updated FIDDLE
New edit: now you have the left column at 50% and the right is 50% -1px. Probably it will never matter as no user will probably notice, but if you are a perfectionist insteed of giving your right column a 50% width you may use css3 option and use:
width: calc(50% + 1px);
perfectionist fiddle
I want to align two elements,in the same line,like this: click here
full code
<div id="element1"> element 1 markup </div>
<div id="element2"> element 2 markup </div>
css
#element1 {
display:inline-block;
margin-right:10px;
width:200px;
background-color:red;
}
#element2 {
display:inline-block;
width:200px;
background-color:red;
}
Also,without overlapping each other.For example if a have a parent div,and two child divs.
The parent div,have 1000px width,and the childs have 500px each,so they fit.
But if i resize the first div to 600px,i want the second one to auto resize,and keep staying inline,without changing his position,or the first to overlap the second.
In the fiddle above,they are aligned in the same line,but doesnt matter what i do,the second one changes his position instead resizing,or they overlap each other.
Any idea?
I know it must be done with percentage,but is not working either
http://jsfiddle.net/a4aME/507/
#element1 {width:50%; background-color:red;float:left}
#element2 {width:50%; background-color:red;float:left}
Take off the the display: and float it all left.
The width attribute accepts percentage value, base on its parent (or its nearest parent with the position:relative attribute if the element has the property position set as "absolute" or "fixed").
So you can use this CSS to the child
#element1 {display:inline-block;margin-right:10px; width:50%; background-color:red;}
#element2 {display:inline-block; width:50%; background-color:red;}
PS: If you are using inline-block, you have to make sure that there is no space between the tags, so you HTML must became this
<div id="element1"> element 1 markup
</div><div id="element2">
element 2 markup </div>
Check this jsfiddle to see if it is what you wanted. I'm not using display:inline-block since it looks that it is what's causing the problem. If you don't mind using floats, then this is your answer.
EDIT:
Check this resource here to see/correct your problem.
HTML
<div class="menu">
<p>normal</p>
</div>
<div class="menu">
<p>normal</p>
</div>
<div class="menu">
<p>normal</p>
</div>
<div class="menu">
<p>Why does this div stays at the top</p>
</div>
CSS
.menu{
width:120px;
background-color:red;
display:inline-block;
height:400px;
}
http://jsfiddle.net/jezVt/
I have four divs aligned next to each other using inline-block. When I enter text inside the div using p tag, the div with two lines stays at the top while the other three divs(has just one line text) are aligned properly.
Help please..
add you code vertical-align:top; demo
The reason is that just like every inline element, your .menu elements have the default value baseline for their vertical-align property. This means that when the browser calculates layout for the .menu elements that appear side-by-side, each element is positioned so that the baseline of their contents is vertically aligned with that of the others.
In this specific case, this means that the baseline of last line of text in each .menu is aligned with that of the others. You will notice that by adding more text and making it to occupy three or more lines, the element that contains this text is going to be "pulled upwards" more and more in relation to the others.
Finally, as everyone has said using vertical-align: top lets the browser know that you want the divs to be aligned with respect to the top of their content, which produces the desired result.
write vertical-align:top; in css:http://jsfiddle.net/aashi/jezVt/1/
From my first look, is that you have to much text in the fourth column.
But use "vertical-align: top;" as the two previous answers.
Why do you want to make divs as inline-block. When div is a block level element you can use that property itself.
[http://jsfiddle.net/jezVt/12/][1]
Alternatively you can try:
.menu{
width:120px;
background-color:red;
display:inline-block;
height:400px;
float:left;
margin: 2px;
}
Is a more efficient way of doing this... for some reason I feel like this is an old way of doing this.
I have this page HERE (I'm re-creating a lynda.com webpage for a lesson) and the wrapper doesn't actually wrap around the section id="trailInfo".
In order to do that I would add br class="br_clear" /
Is there a more correct way of doing this? If I add clear=both to the section is doesn't work, I have to add it to the br.
Thanks!
Update your CSS with the overflow:hidden property inside your parent div
#wrapper {
background-color: #FFFFFF;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 960px;
}
Explanation About Clearing floats
A common problem with float-based layouts is that the parent div's doesn't want to stretch up to accommodate the child floated div's. If you will add a border around the parent div you'll have to command the browsers somehow to stretch up the parent div all the way.
Now see the problem as you were facing: demo
its because you didn't clear the floats on that time.
So the Old Solution of this problem is clear:both;
if you will add extra div after the child floated elements like mentioned below code this will clear the floats:
<div class="parent">
<div class="left-child"></div>
<div class="right-child"></div>
<div style="clear:both;"></div>
</div>
New Solution is overflow:hidden;
if you will give overflow:hidden to your parent div this will automatically clear all the child floated elements inside the parent div.
see the new solution demo: tinkerbin.com/WKqFS7Lc
Hi now give to #wrapper overflow:hidden;
as like this
#wrapper{
overflow:hidden;
}
Demo
Add height: auto; to wrapper class. it works
you should use overflow:hidden; property on your wrapper.
#wrapper{
overflow:hidden;
height:auto;
}
I have two inner divs which are nested inside a wrapper div. I want the two inner div's to get arranged one below the other. But as of now they are getting arranged on the same line.
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
#inner1{
float:left;
}
#inner2{
float:left;
}
<div id="wrapper">
<div id="inner1">This is inner div 1</div>
<div id="inner2">This is inner div 2</div>
</div>
Try a clear: left on #inner2. Because they are both being set to float it should cause a line return.
#inner1 {
float:left;
}
#inner2{
float:left;
clear: left;
}
<div id="wrapper">
<div id="inner1">This is inner div 1</div>
<div id="inner2">This is inner div 2</div>
</div>
If you want the two divs to be displayed one above the other, the simplest answer is to remove the float: left;from the css declaration, as this causes them to collapse to the size of their contents (or the css defined size), and, well float up against each other.
Alternatively, you could simply add clear:both; to the divs, which will force the floated content to clear previous floats.
Set the main div CSS to somthing like:
<style>
.wrapper{
display:flex;
flex-direction: column;
}
</style>
<div id="wrapper">
<div id="inner1">This is inner div 1</div>
<div id="inner2">This is inner div 2</div>
</div>
For more flexbox CSS refer: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The default behaviour of divs is to take the full width available in their parent container.
This is the same as if you'd give the inner divs a width of 100%.
By floating the divs, they ignore their default and size their width to fit the content. Everything behind it (in the HTML), is placed under the div (on the rendered page).
This is the reason that they align theirselves next to each other.
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it. A
floating element is one where the computed value of float is not none.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Get rid of the float, and the divs will be aligned under each other.
If this does not happen, you'll have some other css on divs or children of wrapper defining a floating behaviour or an inline display.
If you want to keep the float, for whatever reason, you can use clear on the 2nd div to reset the floating properties of elements before that element.
clear has 5 valid values: none | left | right | both | inherit. Clearing no floats (used to override inherited properties), left or right floats or both floats. Inherit means it'll inherit the behaviour of the parent element
Also, because of the default behaviour, you don't need to set the width and height on auto.
You only need this is you want to set a hardcoded height/width. E.g. 80% / 800px / 500em / ...
<div id="wrapper">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
CSS is
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto; // this is not needed, as parent container, this div will size automaticly
width:auto; // this is not needed, as parent container, this div will size automaticly
}
/*
You can get rid of the inner divs in the css, unless you want to style them.
If you want to style them identicly, you can use concatenation
*/
#inner1, #inner2 {
border: 1px solid black;
}
You don't even need the float:left;
It seems the default behavior is to render one below the other,
if it doesn't happen it's because they are inheriting some style from above.
CSS:
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
</style>
HTML:
<div id="wrapper">
<div id="inner1">inner1</div>
<div id="inner2">inner2</div>
</div>