Hello i used Bootstrap and my 2 div col-md-6 and col-md-6 are not in align in height.
Use this css for the first div.
div.col-md-6 {
display: inline-block;
vertical-align:middle;
}
The simplest way to align vertical align here is to add padding from top in the first div.Your second div have buttons and must be having padding also.
Use min-height for both using class to div. It will solve your query.
eg:
<div class="col-md-6 mycol">
</div>
<div class="col-md-6 mycol">
</div>
style.css
.mycol{
min-height:100px;
}
Without the code, it's hard to find the cause, but I guess your two div are without a css height property and then adapt to their content.
The div on the right contains items that seems to have a padding on top and bottom, resulting in an item with a greatest height than the one on the left.
Your two div are aligned on the top and as it's already been mentionned you need to add the same padding on the left and right cols (I don't like the vertical align answer, as it work in this case, but could cause issues as the cols height could change).
If you dont have a scenario where you text will wrap to the next line, you can use line-height which will be same for both the sections.
Related
This is driving me mental.
Why wont my third div (content-col-text) not go up on float right?
It stays aligned to the gallery-thumb-container? I need it to go to the right and up and align with large-image-container - this is where the outer div wrapper is (entry-content)..
I dont have any weird margin stuff going on even..
Your order is not correct. You need to change it as below for it to work.
Below is the code:
The HTML:
<div class="large-image-container"> </div>
<div class="content-col-text"> </div>
<div class="gallery-thumb-container"> </div>
The CSS:
.large-image-container{float:left; width:66%; background:red;}
.gallery-thumb-container{float:left; width:66%; background:yellow;}
.content-col-text{float:right; width:31%; background:green;}
The Fiddle demo:
DEMO
Usually, under such circumstances, when you use a clear:both;, the floats get corrected and it works properly.
Hope this helps.
your gallery-thumb-container has probably been forced down as it floats left and there's no more space to the right of large-image-container.
You could try switching the order of the <div>'s and put content-col-text second instead of third
Another option would be to position it absolutely, but that will take it out of the flow of the document...
I would like to know if it is possible for block elements, floated in a direction, not to wrap when they exceed the width of the parent element.
That was the quick and short question, for a little more details and an example, please see below.
I have done some research about this and I have not found a definite answer of whether it is impossible or not and that is why I am looking for a definite answer here of whether this can be done or not.
And in the case that it is not possible, I would appreciate a quick explanation about it so that I can improve my understanding of how CSS works.
Please see the following example.
I have 1 "container" div and inside it I have 3 "row" divs. Let's say the "container" has a hypothetical width of 200px and each "row" has a hypothetical width 100px. These values are not specified in the css, they vary based on the content on the page.
Each "row" is floated to the left so that they appear horizontally.
<div class="container">
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
</div>
.row {
float: left;
}
In this case, when the total width of the "rows" exceeds the width of the "container", is it possible for the "rows" not to wrap and to remain in a single horizontal line ?
Just to emphasize, I cannot specify an exact width for the "container" in the css because I want the layout dynamic in order to accommodate different content.
Thank you.
The behaviour you're looking for can be achieved by replacing float: left with display: inline-block, and having white-space: nowrap on the parent container.
See this fiddle: http://jsfiddle.net/XYzea/1/
Blocks inside the container are aligned side by side (like float) but their parent has no width specified. By the way, the wrapper encloses nested divs. inline-block works in all modern browsers except IE<8 in which is not possible to use that display property with any hack if the element is a natural block element
The only way I can think of is to have the container > wrapper > rows. The container can be dynamic in size and have overflow:hidden while the wrapper will keep the rows in a single line
How can I achieve the following layout? Specifically the positioning of Image and DIV
I've found that unless I set a specific width for the Div, it will just go on to the next line and take up the full width of the container. Additionally aligning it relative to the bottom of the image is giving me trouble. Currently they're both float:left
Edit: The two solutions so far work if the image is a constant width which I guess I could work with, but it's going in a Wordpress theme for an author's profile page and it's possible that images would have slightly variable widths. Is there a solution that would have the Div right next to the image (minus padding) regardless of how wide or narrow the image is? Basically having the div adjust its width to accommodate the image width.
Tested in IE7/8, Firefox, Chrome.
Live Demo #2
CSS:
#container{width:80%; padding:12px; margin:0 auto}
#top{position:relative;overflow:auto}
#top img{float:left; background:red; width:100px; height:180px}
#header{position:absolute; bottom:0; right:0}
#content{height:200px}
JS/jQuery:
$('#header').css('margin-left', $('#top img').width() + 10);
(you might want to change the + 10 for parseInt($('#top img').css('margin-right'), 10))
HTML:
<div id="container">
<div id="top">
<img src="" />
<div id="header">Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. </div>
</div>
<div id="content">dfgdfg</div>
</div>
I'd put the header image and header div inside its own container and position the items within it using absolute positioning.
I've put together a quick sample here: http://jsfiddle.net/JjxYj/1/
Notice here that if you remove the width of the Div in the header, it will become the width of its content.
Update
To answer the updated part of the question, here's another solution that'll allow the image to be of any width whilst still positioning the header text at the bottom of its containing item: http://jsfiddle.net/JjxYj/5/
In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)
I'm experimenting with DIVs to align my page's contents:
http://labs.pieterdedecker.be/test/test.htm
As you can see, there's something wrong with the sidebar. I got the sidebar DIV to be aligned to the right of the page by doing float: right, but when the text in the sidebar stops the main area takes over the width that should be used by the sidebar.
How do I fix this?
I supose what you want to accomplish is to separate the #body div in 2 columns.
First of all it will be easier if you package main column in its own div like this:
<div id="body">
<div id="sidebar">lorem ipsum...</div>
<div id="main">lorem ipsum...</div>
</div>
and then give #main div a width.
If you need to preserve your markup, then ALL #body elements other than #sidebar must have a width.
Another solution that would work if page is static and it's content will not "grow" is to set a big-enough heigth to the sidebar...
maybe what you are looking for is equal height columns... there are some differente method to do this... just google for it or take a look at this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
You give the main area a width.