http://jsfiddle.net/uCwEz/
I need to have three divs, with the first and last div (red and blue) having a fixed width, and the middle div (green) dynamically changing its width to fit perfectly between the outside divs as the page width is adjusted. In the jsFiddle, I've accomplished this with the fixed-width first div and content adjusting, and I've floated the third div right, but it needs to slide up into the empty space you see next to the main div.
Just move #div3 between #div1 and #div2 in your HTML.
<div id="container">
<div id="div1">
</div>
<div id="div3">
</div>
<div id="div2">
</div>
</div>
Demo http://jsfiddle.net/thebabydino/uCwEz/2/
Related
I'm trying to achieve a layout where there is a div with a max height, and inside that, there are two divs. One div (the footer), has a fixed height (55px). The other is a scrollable div where the height will increase/decrease according to it's content.
<div class="parent">
<div class="wrapper">
<div class="panel">
Scrollable Div
</div>
<div class="fixed">
Fixed footer
</div>
</div>
</div>
The scrollable div height should always fit it's content. But when the max height is exceeded (.wrapper has a max-height of 300px), it should only take up the remaining space minus the footer height without affecting the footer's position.
But what I achieved of this layout is not according to my requirement.
In my example, when content gets added into the scrollable div, the footer gets pushed out of the wrapper. What should happen is the footer to remain at the bottom of the wrapper (without getting cut off), and the scrollable div to span its height upwards.
Please note I'm trying NOT to use position: fixed or absolute.
This is for a mobile app so fixed positions causes a lot of bugs.
Here is the JS Fiddle of what I have so far,
fiddle
set the max-height:300px to the .panel div instead
JS Fiddle here
I have an upper block with a content wrapper, and a bottom block, which consists of two equal blocks also with content wrappers inside.
https://plnkr.co/edit/DTar7Wy5e37HnqbU2Gud?p=preview
<div class="upper">
<div class="wrap"></div>
</div>
<div class="bottom">
<div class="left">
<div class="left-wrap"></div>
</div>
<div class="right">
<div class="right-wrap"></div>
</div>
</div>
Wrapper blocks have a dotted border.
No matter how big or small screen is, the smaller bottom wrap blocks together will be always the same size and position as upper bigger one, because smaller blocks have 150px max-width, which is half of the upper wrapper block max-width.
But when you change the width of the bottom composing blocks from 50% to 40% and 60%, position of the smaller wrapper blocks is also changing.
https://plnkr.co/edit/FTmHxm2F3vD8LhF5DM0d?p=preview
You can change their max-width to some other numbers (99 and 201 in my example), but it seems impossible to make them always keep the same position as the upper wrap.
So, is there any way to make these wrappers from the second example act like in the first example with 50%?
You have to wrap also the content in your bottom block:
<div class="bottom">
<div class="wrap wrap-down">
<div class="left">
<div class="left-content"></div>
</div>
<div class="right">
<div class="right-content"></div>
</div>
</div>
</div>
adding in your css the new .wrap-down class that I have created:
.wrap-down{
display:flex;
}
and removing the dotted black border of .left-content and .right-content.
The problem that you had it is that you were wraping in your upper div the block, so you were taking the 90% of the width of the .upper class (its nearest parent).
In the block that you have down you were taking the 40% and 60% of your .bottom class, that were the 100% of the width of the page and not the 90% (by the wrapper) as in the first case.
Here you have the JSFiddle in which you can see the effect.
Let me know if you have doubts about this.
EDIT: This JSFiddle works if you set the left and the right of the block to 50% with another solution than yours. I am trying to get it for another percentages. I will edit if new changes works.
EDIT 2: Finally I got the solution for your problem. See the following JSFiddle. It does not matter the % that you put to .left or .right class, it will make the effect that you want to achieve.
I have a div inside which there are a couple of divs containing just plain text. but whenever the outer div is given a width, the child div also gets the same size. is there any way to not make this occur so that the child divs get covered for only the text inside it, while the outer div can have any size?
Use display:inline-block
HTML:
<div class="container">
<div class="text">text1</div>
<br />
<div class="text">text some text</div>
</div>
CSS:
.text{display:inline-block;}
Fiddle here.
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.
I have a floated div with "sidebar" text. Its parent container has text as well.
I don't want to have text below my floated "sidebar" div:
example http://img864.imageshack.us/img864/6058/screenshot2011052613084xv.png
How can I fix this?
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<h2>Foo</h2>
<p>Text!</p>
</div>
If it doesn’t mess up anything else, you can use overflow: hidden or overflow: auto to fix this:
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<div class="next-to-float" style="overflow: hidden;">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
See http://jsfiddle.net/pauldwaite/YL5P3/
I’ve written about this more fully here, including code to make it work in IE 6: xHTML/CSS: How to make inner div get 100% width minus another div width
I still don’t really understand the reasoning behind why overflow: hidden does this, but I understand that it does follow from the CSS spec.
Set right margin on non-floated element
JSFiddle
The only requirement is that you must predefine your floated element's width. Then it can have whatever height you like and the non-floated content (when applied right margin) won't stretch under floated element.
How it works?
We have floated element on the right with width = X
We have usual content but set its right margin = X+s where s is some predefined space between your content and floated element so they don't touch.
And that's it.
Since you have multiple content elements (heads, paragraphs) you have to put them inside a container with this right margin setting.
<div id="parent">
<div id="floated">Foo bar</div>
<div id="content">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
And CSS:
#floated
{
float: right;
padding: 1em;
background: #ccc;
width: 10em;
}
#content
{
margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}
Why is this solution better than setting main content width?
Because setting main content width will only work when you want to limit your document content to a fixed width (like 960 grid). But when you want your content to stretch over the whole browser window width, this solution will work regardless of browser window size.
And a small advice
Avoid using inline styles whenever possible because maintainability of your application/site will become a nightmare.
You can nest 2 div tags inside the container. Float them both and resize them as you need them to be.
Set a bottom margin on the floated element that equals the length of the remainder. Or add a width to the larger element and float it the other direction.
<div id="parent">
<div id="floated" style="width:200px; float:right">Foo bar</div>
<div id="content" style="width:600px; float:left">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
OR
<div id="parent">
<div id="floated" style="width:200px; margin-bottom:200px; float:right">Foo bar</div>
<h2>Foo</h2>
<p>Text!</p>
</div>
its easy simply add width in [P] tag see here
example
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<h2>Foo</h2>
<p style=" width: 500px; ">Text!</p>
</div>
for example your ( id="parent" ) have 800px width
and (id="floated") right-side bar have 200px width
then make your [P] 800px - 200px = 600px
so set your [P] width to 600px
---------- or
if you want some space between text and bar make [P] width 580px
it means 20px for space