So I have 2 divs
currently
div#1 is {float:left; width:48%} and contains some gallery doodad
div#2 is {float:right; width:48%} and contains a stack of buttons
after that, within the same container a bunch of other divs and plaintext follows.
So what I would like to do is have div#1 keep doing its automatic height thing but I want div#2 height to equal div#1 so I could vertically stretch out the buttons inside.
I have no access to the structure (buried somewhere deep in the php framework) and all I got is CSS. Is this possible within my current constraints?
Apply
display: flex;
to the surrounding container, then
float: none;
to div#1and div#2.
Note: This is only a viable solution if there is a parent container that does only contain these two div.
Learn more about flex.
Without seeing it's hard to say for sure, but I would think that if div#1 and div#2 both had height:100%, then when div#1 "grows" from content, so will the parent div, and because both child divs (1 & 2) are 100% height of the parent, both should grow equally.
For browsers that support CSS3.
Set a parent DIV:
<div id="parent">
<div id="child_1"></div>
<div id="child_2></div>
</div>
Then in CSS set #parent_DIV to display as table (display:table). Each child DIV set to display:table-cell.
In this case the higher div will set the rule.
Add borders to each (including parent) for trial and test it out.
I have pulled this from the head but generally that will work, including newer IE browsers.
Here it's in more details:
http://www.brenkoweb.com/tutorials/css/css-visual-formatting-model/display-property.php
And soon hopefully more examples will folow.
Related
I encountered a problem about float style. Like the html code below:
...
<body>
<div style="float:left;width:25%;height:100px;background-color:red;"></div>
<div style="float:left;width:74%;height:100px;border:1px solid black;">
<div style="width:1000px;height:50px;background-color:yellow;"></div>
<div style="clear:both;"></div>
</div>
</body>
...
The effect is that the content in the 2th float div overflow.
Yellow div is in the float div, but its width exceeds its parent's.
I want to know how to set the css style to make the 2th float div can suite its child element's width/height automatically?
I know clear style can clear the float of divs listed by order, but how to handle it when it contains a larger child?
I don't want to use js to modify parent div's width.
You can achieve this by using min-height and min-width. This way the parent will always fit the children's height and width when they are bigger.
Check it out here.
By removing width and height property (or setting min-heigh and min-width property as Stephan mentioned you will made parent div to stretch over child.
http://jsfiddle.net/5ohtx2nc/1/
This however cause that if they are wider than screen second floated div will move to next row
http://jsfiddle.net/5ohtx2nc/
If you insist on having two divs one next to another you will need to do some tricks like in How to position two divs side by side where the second width is 100%?
http://jsfiddle.net/5ohtx2nc/3/
I'm a bit afraid of using floats as I didn't yet understand clearing the floats and all the hacks that are on the internet in regard to that activity so I've used display:inline-block to place two divs in inline fashion. Their container has a
width:auto;
max-width:900px;
and each of the divs has
display:inline-block;
width: 450px;
Now no matter what I do the second div always breaks to another line right below the first div.
Here's the code : http://codepen.io/anon/pen/xgtFd
I have already modified the width of the two divs like for example
width:440px;
but it didn't help. Still the second div is slightly 'off place'. That's weird cause I was making a website and using pretty much the same approach for my header like in this project. Please help me determine the problem.
I would be glad for any help.
The widths are too wide.
Bump the nav down to about 446px, and they come back in line.
Why 444px instead of 450px? Two reasons:
Your border is taking 2px.
There is whitespace between the <div> tags in your markup, which is reflected in the rendering. If you would like it to be able to make it 450px, put the closing div tag and the next opening div tag immediately adjacent, like so: </div><div id="nav">
If you want to be able to keep the border, and set the width to 450px, then you should check out box-sizing, and utilize box-sizing: border-box;.
Edit:
To address your vertical alignment issues, you need to apply vertical-align: top; to the div elements (the nav and logo divs).
And, the ul isn't centered because when you apply display:block to it, it fills the full width. So you could either make the contents of the div centered with text-align: center on the ul, or you could make the ul display: inline-block.
I need a little bit of help disciplining my HTML. It seems to be acting up.
Anyway, the content area of a page I'm working on has two columns. To get the multi-column look, I'm not using one containing div for each column because some of the "rows" in the column need to be lined up.
So instead, I'm basically using several "rows" with two inline divs per row -- one for left content, one for right. Most of them are working correctly..but for some reason, my last row isn't. No matter what, it will not listen to me when I give it a width.
Here's what the relevent HTML looks like:
<div id="mainContainer">
<div id="topBar"></div> //full width
<div id="featured"> //this "row" is working fine
<div id="featuredVideos"></div> //these two
<div id="featuredLiterature"></div> //are inline
</div>
<div id="browseButtons"> //this is the "row" that is acting up
<div id="litBrowse"></div> //these two
<div id="vidBrowse"></div> //are inline
</div>
</div>
In the mean time, what types of situations can cause a div to not listen to a width? I even went so far as to give every single child div inside litbrowse and vidbrowse1 the same width that they have, 450px, and no dice. All of the content above it, which has essentially the exact same structure, is working fine. The only difference, maybe, is that the "row" above the row in question is comprised of two floating divs.
Here is a jsfiddle showing the issue. The bottom two divs (Browse lit by category, browse vids by category) should be spaced out, but they're scrunching together because they won't take their 450px width.
The problem is that you are saying that .browseBtn is inline. Inline elements don't take widths, only block level elements do.
Using inline-block instead will do what you want. It is inline enough to make the divs side by side and block enough to allow you to specify the width.
See http://jsfiddle.net/abtFr/2/
SECOND EDIT - Others have responded saying to use display: inline-block instead of display: inline. inline-block is not compatible with IE7. HOWEVER, we can make it compatible by appending
zoom:1;
*display: inline;
to the element using inline-block. To make compatible with IE6, you need to specify a height, so add
_height: [yourheight]px;
The underscore will target IE6 only.
Alternatively you can float the elements left, in which case my original reply may be relevant.
EDIT - I responded without seeing the jsFiddle; this response can probably be largely ignored.
To answer your question, floating an element will cause it to be taken out of the normal layout. If a div is floated left inside another div, it will be placed to the far left of that container, but its dimensions will not be taken into account when sizing that container div; in other words, that container will act like there are no divs inside.
To fix this you need to place another (empty) div inside the container, after the floating divs, and assign the style "clear: both" to it so that it will take the floating divs into account when being positioned. In turn, the container div will see the last cleared div and resize to take it into account.
Alternatively, sometimes you can skip adding the cleared div inside the container, and just add the style "overflow: hidden" to the container itself. This is somewhat of a hack, but a pretty robust one as far as hacks go.
Hope this solves your problem; if not we'll have to wait for more information.
It's simple, yes, you have a div, but you define its display as inline (with .browseBtn definition). So it's not a block-element anymore and it doesn't listen to width definition.
I've corrected the fiddle, although it might have other side effect.
I have this:
http://jsfiddle.net/UHrLH/1/
I set the height on the box element to auto, but min-height is 200px;
Now if i try to make more content in the first box, the height expands but it creates a big white space under it. I do not want that, i want to have the box under eachother like you can see above, where the height on all boxes is 200px
See the issue here:
http://jsfiddle.net/UHrLH/2/
http://jsfiddle.net/chricholson/UHrLH/10/
This will give you boxes inline but unfortunately the pairs will not extend to match the height of it's partner. To do this you will need to use tables or a javscript overwrite to capture the height. Also, bear in mind display: inline-block will not work on divs in IE7 and below, it would work on a span though: http://www.quirksmode.org/css/display.html#t03
http://jsfiddle.net/UHrLH/11/
I have added an additional div if that is ok for you...
<div class="box_Container">
I'm trying to get the div wrapper to surround all the divs within it so depending on the amount of content the height of wrapper will grow.
I guessed that the way of doing this would be to set height: 100% but as you can see from the screen grab below, this is not the case.
Where it says 'No :-(' is what having height: 100% is doing where ideally I would like wrapper to be at the bottom where it says 'Yes' and I have drawn a red line.
Any help is much appreciated.
If you are using floats, giving the container overflow:hidden might fix the problem. If no fixed size is given to the div, this makes it stretch over the floated elements.
If you have absolutely positioned elements inside the container, it would be good to see the html/css for a solution.
Sounds like you need a clearfix.
http://css-tricks.com/snippets/css/clear-fix/
You'll want to define the clearfix class (as stated in the above link) add .clearfix to the #wrapper.
Can you post a link to the css?
The first thing that comes to my mind is the position attribute of the divs inside the wrapper. If they are set to float or absolute they will not be contained in the wrapper. That is intended behavior.
i.e. Here is a nice article about containing floats:
http://complexspiral.com/publications/containing-floats/
If, as is likely, that is the problem, you can either relative-position the inside divs or, if you are using floats, you can add an invisible block-displayed hr at the end of the wrapper, like so:
<div id="wrapper">
/*All divs to be contained here*/
<hr style="display:block;clear:left;visibility:hidden;">
</div>
The clear:left; is what gets rid of the "floating" of the previous elements. THe 'left' should be changed according to your floats.
More in the article above, this is the method i like best.