Does anyone know why in this example
the inner <div> displayed vertically instead of horizontally?
I use chrome element inspect can see a huge margin area on the right of each <div>, but without any margin value.
Found this example
could be the answer to this question, too. Just in case anyone needs it.
It happens so because you are using block layout for each inner div (display:block as default for div elements). Instead you should use (for example ) display:inline-block and reduce width (to 33% in my example) as it adds some extra pixels as spacing between three inner divs :
.cols_section > div{
display:inline-block;
}
Example
Another option is to use table layout, so you don't have to change width for each inner div:
.cols_section {
display:table;
width:100%;
}
.cols_section > div{
display:table-cell;
}
Example
Set width for each class to auto. That should solve your problem..
Example:
.cols_section {
max-width: 1045px;
height: 100px;
}
.col1 {
background: green;
width: auto;
height: 100px;
}
.col2 {
background: yellow;
width: auto;
height: 100px;
}
.col3 {
background: blue;
width: auto;
height: 100px;
}
Related
I have two inline-block elements (first image). The first one has fixed width. The second one doesn't have fixed width because the container may grow horizontally so it should fill it.
When second element text is large (second image) then it wraps down.
But what I want is the element to grow vertically (third image).
I need also text to preserve line breaks.
You can apply max-width: calc( 100% - LABEL_WIDTH ) to your .element class. Replace LABEL_WIDTH with the width of the label. This way you can define a width in em for the label instead of using two percentual values.
See this JSFiddle for a working example: http://jsfiddle.net/QL78X/2/
See this link for a table of browsers supporting calc(): http://caniuse.com/calc
li {
display: inline-block;
vertical-align: top;
list-style-type: none;
}
.label {
width: 7em;
}
.element {
width: calc( 100% - 7em );
white-space: pre-line;
}
Here's a fiddle: http://jsfiddle.net/Pv8yH/1/
Basically, I've set a width on the label, then set a max-width on the element. I've set the white-space to 'nowrap' so that the second LI doesn't wrap down. Then I have to make sure that white-space is reset back to 'normal' within the LI itself. The max-width is just for show, really, the magic is the white-space property (at least in terms of your question).
ul { white-space: nowrap; }
ul li {
display: inline-block;
white-space: normal;
}
li.label { width: 30%; vertical-align: top; background: red; }
li.element { max-width: 70%; background: green; }
NB. If you are setting a width in ems for the first element, it may be tricky to get it to all fit. It will flow like you want, but you will definitely have to tweak it to make it look nice.
You can use
float:left;
Check this example here:
http://jsfiddle.net/3M5MF/
I suggest you use max-width on the right element. I did an example here: http://codepen.io/mattdrose/pen/qCLzG?editors=110
.field__item {
display: inline-block;
vertical-align: text-top;
}
.field__item--1 {
width: 30%;
}
.field__item--2 {
max-width: 70%;
}
I use percentages, but you can replace these with your preferred method.
However, I think you should use floats so you don't have to deal with the html white space when calculating your widths.
I used relative position of container with fixed height http://jsfiddle.net/6qMvy/
.container{
width: 400px;
height: 600px;
position: relative;
}
.left{
width: 100px;
position: absolute;
}
.right{
position: absolute;
left: 120px;
}
I have a container div that has two inner divs. The inner divs toggle display:block/none on a hover over the outer container, so only one inner is visible at any given time.
The outer container has a min-height, but can expand depending on the inner contents. If both inner contents are shorter than the min-height, everything works well. However, if one of the inner containers is taller than the min-height, I get a jump in the height of the outer container on hover.
What I want is:
The outer container keeps its min-height if both inner containers are shorter.
The outer container has the height of the taller of the two inner containers IF either one is taller than the min-height
There is no expanding/collapsing happening on hover at any time.
Sample HTML:
<div class="outer">
<div class="inner inner1">Inner 1 Green</div>
<div class="inner inner2">Inner 2 Blue</div>
</div>
<div class="after">Some text afterwards</div>
Sample CSS:
.outer {
position:relative;
width: 300px;
min-height: 150px;
background: red;
padding: 10px
}
.inner {
width: 200px;
}
.inner1 {
background: green;
height: 200px
}
.inner2 {
background: blue;
height: 100px;
display: none;
}
.outer:hover .inner1 {
display: none;
}
.outer:hover .inner2 {
display: block;
}
Sample Fiddle: http://jsfiddle.net/ZhS6c/
Important: I am looking for a pure CSS solution. I could easily fix this with jQuery or basic JS, but this is not an option.
Don't hide the elements by setting display to none, instead set their margin-left to a large negative number which places them far away the left side of the screen. This way, if you float the two .inner and add a clearfix (or better, set display: hiddden on .outer), the container will always be tall as the tallest child element.
In code:
.inner {
width: 200px;
float: left;
}
.inner1 {
background: green;
height: 200px
}
.inner2 {
background: blue;
height: 100px;
margin-left: -1000px;
}
.outer:hover .inner1 {
margin-left: -1000px;
}
.outer:hover .inner2 {
margin-left: 0;
}
Then, on the container you have two solutions: the clearfix (http://jsfiddle.net/ZhS6c/3/)
.outer:after{
content: "";
display: block;
clear: left;
}
and the block formatting context forcing (http://jsfiddle.net/ZhS6c/2/)
.outer{
visible: hidden;
}
Method two
There are also different methods, for example you can hide the unwanted element by shrinking its width to zero. When doing this (with all the floating thing, of course) also set overflow to hidden, otherwise the content will still be visible. Live example: http://jsfiddle.net/ZhS6c/4/.
Without floating
If you don't like the float in there you could try a inline-block approach, and set the widths as before. Live example: http://jsfiddle.net/ZhS6c/5/. This solution needs also a little edit of the HTML code, since if you place a whitespace between the two .inner it will be actually rendered (try to remove the comment in the example to see what happens).
Try this.Uses combination of display and visibility :
Case 1: .inner1 is always greater than .inner2
.inner1 {
display:inline-block;
background: green;
height: 200px
}
.inner2 {
background: blue;
height: 100px;
display: none;
}
.outer:hover .inner1 {
visibility:hidden; /*sets visiblity instead of display to maintain height;*/
width:1px; /*reduces width to 1px for adjustment."width:0px" will not work. */
}
.outer:hover .inner2 {
/* Below two lines for .inner2 div to be on same line*/
display: inline-block;
float:left;
}
See this Demo Fiddle with .inner1 height = 200px
Even if you increase the height of .inner1 the container will adjust the height accordingly:
See this Demo Fiddle with .inner1 height = 300px
OR
Case 2: .inner2 can be greater than .inner1
See this Demo Fiddle .inner2 > .inner1
Change done for above fiddle:
.inner2 {
position:relative;
right:4px;
background: blue;
height: 400px;
display: none;
}
.outer:hover .inner2 {
/* Below two lines for .inner2 div to be on same line*/
display: inline-block;
vertical-align:top;
}
Fiddle in response to comment: Container gets taller div height in the beginning itself
If the margin trick doesn't work, another option is using display: table, then collapse the one not to be shown with a combination of width: 0 and visibility: hidden. The two items will form cells in a row which has the height of the taller one, while the zero width prevents it from otherwise impacting the page layout.
Maybe playing with opacity can help
Here's a fiddle
all i'v done is
.outer:hover .inner1 {
opacity:0;
}
.outer:hover .inner2 {
display: block;
position:absolute;
top:10px;
}
I put the inner2 in absolute so it goes on top, and so give it a margin top of 10px (cause of the padding of the parent container)
.outer:hover .inner1 {
visibility: hidden;
}
Try using visibility.
Remove the min height from the outer and let the hight be determined by the what ever is the highest inner div
.outer {
position:relative;
width: 300px;
min-height: 150px; !!!! remove this
background: red;
padding: 10px
}
I want to split up the view in four parts. A header at the top, using full page width and fixed height.
The remaining page is split up in two blocks of the same height, the upper of them contains two same-sized blocks next to each other.
What I tried is (without the header):
#wrap {
width: 100%;
height: 100%;
}
#block12 {
width: 100%;
max-height: 49%;
}
#block1,
#block2 {
width: 50%;
height: 100%;
float: left;
overflow-y: scroll;
}
#block3 {
width: 100%;
height: 49%;
overflow: auto;
/*background: blue;*/
}
.clear {
clear: both;
}
<div id="wrap">
<div id="block12">
<div id="block1"></div>
<div id="block2"></div>
<div class="clear"></div>
</div>
<div id="block3"></div>
</div>
Apparently, using a percentage value for the height won't work that way. Why is that so?
add this to you CSS:
html, body
{
height: 100%;
}
working Fiddle
when you say to wrap to be 100%, 100% of what? of its parent (body), so his parent has to have some height.
and the same goes for body, his parent his html. html parent his the viewport..
so, by setting them both to 100%, wrap can also have a percentage height.
also:
the elements have some default padding/margin, that causes them to span a little more then the height you applied to them. (causing a scroll bar)
you can use
*
{
padding: 0;
margin: 0;
}
to disable that.
Look at That Fiddle
When you set a percentage height on an element who's parent elements don't have heights set, the parent elements have a default
height: auto;
You are asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing with the height of child elements.
Besides using a JavaScript solution you could use this deadly easy table method:
#parent3 {
display: table;
width: 100%;
}
#parent3 .between {
display: table-row;
}
#parent3 .child {
display: table-cell;
}
Preview on http://jsbin.com/IkEqAfi/1
Example 1: Not working
Example 2: Fix height
Example 3: Table method
But: Bare in mind, that the table method only works properly in all modern Browsers and the Internet Explorer 8 and higher. As Fallback you could use JavaScript.
add this to your css:
html, body{height: 100%}
and change the max-height of #block12 to height
Explanation:
Basically #wrap was 100% height (relative measure) but when you use relative measures it looks for its parent element's measure, and it's normally undefined because it's also relative. The only element(s) being able to use a relative heights are body and or html themselves depending on the browser, the rest of the elements need a parent element with absolute height.
But be careful, it's tricky playing around with relative heights, you have to calculate properly your header's height so you can substract it from the other element's percentages.
Percentage in width works but percentage in height will not work unless you specify a specific height for any parent in the dependent loop...
See this :
percentage in height doesn’t work?
The div take the height of its parent, but since it has no content (expecpt for your divs) it will only be as height as its content.
You need to set the height of the body and html:
HTML:
<div class="block12">
<div class="block1">1</div>
<div class="block2">2</div>
</div>
<div class="block3">3</div>
CSS:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.block12 {
width: 100%;
height: 50%;
background: yellow;
overflow: auto;
}
.block1, .block2 {
width: 50%;
height: 100%;
display: inline-block;
margin-right: -4px;
background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
width: 100%;
height: 50%;
background: lightblue;
}
And a JSFiddle
Basically, the problem lies in block12. for the block1/2 to take up the total height of the block12, it must have a defined height. This stack overflow post explains that in really good detail.
So setting a defined height for block12 will allow you to set a proper height. I have created an example on JSfiddle that will show you the the blocks can be floated next to one another if the block12 div is set to a standard height through out the page.
Here is an example including a header and block3 div with some content in for examples.
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
}
#block12{
position:absolute;
top:20%;
width:100%;
left:0;
height:40%;
}
#block1,#block2{
float:left;
overflow-y: scroll;
text-align:center;
color:red;
width:50%;
height:100%;
}
#clear{clear:both;}
#block3{
position:absolute;
bottom:0;
color:blue;
height:40%;
}
http://jsfiddle.net/Rncu6/
The green div has a max-width attribute, and it should shrink when the screen shrinks.
Instead, what happens is that the green div falls off to another line. If I try to remove the float:left on the green div, it suddenly overlaps with the yellow div, which is not what I want.
How do I fix this?
This seems like a really frustrating issue. The best way I can think to solve it is to remove float:left from p and replace it with display: table-cell.
p {
display: table-cell; /* replaces float:left */
max-width: 300px;
background-color: lightgreen;
height: 200px;
}
The only problem with this approach is that it will render all the margin attributes useless. To work around that, you can just add the inverse of those margin attributes to #img1. For example:
p { margin-left: 10px; }
Would be replaced with:
#img1 { margin-right: 10px; }
JS Fiddle Example
Caveat: I don't know how small you want your minimum width to become, but you'll notice that at a certain point the p will still move onto the next line. This is because it is becoming too small for individual words (e.g. longer words like "paragraph") to fit on one line. To work around that, you can use the word-break:break-all; attribute.
p { word-break: break-all }
That way, the width of p will continue to shrink until the width can no longer fit individual characters on one line.
JS Fiddle Example
Give width in percentages
#img1 {
background-color: yellow;
width: 20%;
height: 100px;
float: left;
}
p {
float:left;
margin-top: 0;
max-width: 50%;
background-color: lightgreen;
margin-left: 10px;
height: 200px;
}
http://jsfiddle.net/Rncu6/11/
The overlapping occurs because the size of the DOM is becomes larger than the browser so it gets pushed below the img div. As already mentioned you can use % to compensate for that. Although, if you want to absolutely define the divs in pixels until the browser can't display them any more.
To expand upon the current answer you could use Media queries...
#img1 {
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
p {
margin-top: 0;
float: left;
max-width: 300px;
background-color: lightgreen;
margin-left: 10px;
height: 200px;
}
p:after {
content: " ";
display: block;
height: 0;
clear: both;
}
#media screen and (max-width: 450px) {
#img1 {
width: 20%;
}
p {
max-width: 50%;
}
}
And here's the jsfiddle - http://jsfiddle.net/SxLCJ/
I have a HTML code as;
<div class="left">
<span class="panelTitleTxt">Title text</span>
</div>
My CSS is as follows;
.left {
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt {
display: block;
width: 100%;
height: 100%;
}
Now how do I center align the span text inside the div? (Assume that the "left" div after the % conversion gets a px width of 100px)
I tried the standard way of using margin:auto, but that is not working.
Also I want to avoid using text-align:center.
Is there some other way of fixing this?
You are giving the span a 100% width resulting in it expanding to the size of the parent. This means you can’t center-align it, as there is no room to move it.
You could give the span a set width, then add the margin:0 auto again. This would center-align it.
.left
{
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt
{
display:block;
width:100px;
height: 100%;
margin: 0 auto;
}
If you know the width of the span you could just stuff in a left margin.
Try this:
.center { text-align: center}
div.center span { display: table; }
Add the "center: class to your .
If you want some spans centered, but not others, replace the "div.center span" in your style sheet to a class (e.g "center-span") and add that class to the span.