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.
Related
In the picture is what I am trying to achieve.
When resized, inner elements should stay as they are:
This is what I tried:
<div style="width:100%;text-align:center;">
<div style="width:80%;margin-left:auto;margin-right:auto;">
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
...
<div>
</div>
But when I resize it, it get like 2 in a row, or 5 in a row, depending on how I resize the screen. Should be 3 all the time, centered. Width of inner elements not to be changed.
Add classes if you can. HTML:
<div class="one">
<div class="two">
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
...
<div>
</div>
...and CSS:
<style>
.one {width:100%;text-align:center;}
.two {width:Npx;margin: 0 auto;"}
.three {width:31%;margin:1% 10px;height:100px;float:left;box-sizing:border-box;}
.two .three:nth-of-type(3n + 1) {clear:left}
</style>
the inner div's need a fixed width (here, 1% on right and left) for a total width of 33%. Fixing height makes this work for variable content, otherwise, it looks off. The "nth-of-type) selector is a failsafe in case you can't use a fixed height.
Elaborating on using a fixed height, if you decide to parse your output with javascript to hide certain elements, they will still be counted in the "nth-child" iterative loop, which would break your layout. Using a fixed height and exact percentage widths should almost always work.
You'll note that there's 1% left over, but it's small enough not to be an issue.
EDIT:
Edited to add box-sizing:border-box;. Setting the box-sizing to border-box will include any added padding or border thickness to size, because if you add padding without it, your layout will break.
EDIT 2:
Reviewing OP's question, there is a requirement for the inner content to maintain a fixed width. The only way to do that is to declare a fixed with for .two or .three. Declaring a fixed width for .three will not center the content without additional css manipulation, so add a fixed width to .two.
Please note that a fixed width is a terrible idea for rendering in mobile, if your application needs that. I would suggest using a media query as follows, and swapping to the more popular two column layout for mobile:
<style>
#media screen and (max-width: 768px) { /* or whatever width... */
.two {width:auto;margin:auto;}
.three {width:46%;margin:2% 10px;}
.two .three:nth-of-type(3n + 1) {clear:none} /*cancels above */
.two .three:nth-of-type(odd) {clear:left} /* every two, clear left */
}
</style>
This will get you on the right track....
I'm trying to have 2 divs fill the screen, one being at the bottom of the page and one being the "main" content area.
I've created a jsfiddle to demonstrate what I need: https://jsfiddle.net/zmnogytL/1/
The HTML looks like this:
<div id="parent">
<div class="messages">
<span id="jstext"></span>
</div>
<div class="input-area"></div>
</div>
The main div (the gray one) shouldn't expand when the content exceeds its height, but instead have a scrollbar within it.
The lower div(blue) should always stay in the same spot.
After countless hours I'm still not getting it to work the way I want to.
Thanks in advance!
Try it:
.messages{
overflow:scroll;
max-height: calc(100% - 100px);
}
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.
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/
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):