I am trying to achieve something like this..
http://line25.com/ see in the footer where he has "About Line25" then "Most popular posts" with block of text by side of each other?
I do this in my footer and on smaller screen resolutions it moves all over the place.
http://akaleez.co.uk/Templates/1/
Put the boxes in a wrapper div and center it like this:
.wrapper {
margin:0 auto;
display:table;
}
Display table will cause it to be exactly as wide as the 3 boxes. Next remove the margin of the first box.
Currently it has 180px margin, which obviously will not center propperly if the screen is smaller or wider then expected.
The reason it "moves all over the place" is that you specify width: 100% for your footer. When the width of the viewport is smaller than the width of the three text blocks, one of them will display below the other two.
Add another wrapper around your blocks of text like this:
<div id="foot">
<div id="footer-wrapper">
<div class="box1">...</div>
<div class="box2">...</div>
<div class="box3">...</div>
</div>
</div>
Then add the following to your CSS definition:
#footer-wrapper {
min-width: 990px;
margin-left: 180px;
}
Then remove the margin-left from .box1.
Note that this will force your whole page to be 1170px wide and display a scroll bar at the bottom of the window if there is not enough space to display it all.
If don't want that, try and add this to your CSS:
#foot {
overflow: hidden;
}
Related
When you do something like:
.container {
column-width: 200px;
height: 300px;
}
<div class="container">
... a lot of text...
</div>
If the text is large enough it will cause that the corresponding text overflows the container width to the right. That's awesome if you want an horizontal layout, however, the div width won't grow because the text has "overflow" the container. If you put a background to the div you will see that the background won't be there after the end of the screen (if the text is sufficienty large). That why, if you put a second div next to this one in an horizontal fashion, the second will be over the overflowed content of the first div, which is undesirable.
The question is: how can I make the first div be adjusted to the content inside him no matter how large it becomes in the horizontal line?
I would probably do it like this (if i understood what you want)
.container {
width: auto;
height: 300px;
}
.text{
Padding-left: 10%;
Padding-right: 10%;
}
<div class="container">
<div class="text">
... a lot of text...
</div>
</div
The container should now change size depending on the text. :)
With CSS3 Intrinsic Sizing, you can use this: width: max-content which expands the width of the parent container based on text it encloses.
Caution - not supported in IE. Check this: https://caniuse.com/#search=max-content
I'm trying to build a layout that roughly looks like this JSFiddle. Now, the problem is:
I have this two wrappers inside my container, one is for the sidebar and the other (wrapper-inner-container) is for the page content itself, both are floated to the left and the wrapper-sidebar has a mechanism to hide and show.
The thing is, when the wrapper-sidebar is visible, the wrapper-inner-container, which has a width of 100vw, should stay floated to the left , on the same line as the wrapper-sidebar and the parent container should remain with the same width of 100vw and simply hide the horizontal overflow. But, as you can see in the JSFiddle, what happens is that since both wrappers in the same line exceed the width of the container, the wrapper-inner-container jumps to the next line, when it was supposed to stay on the same line as the wrapper-sidebar and remain with a width of 100vw. How do I achieve that?
If your purpose is for wrapper-inner-container to take up the remaining space with wrapper-sidebar visible or not. Then you can do this be leaving out the width of wrapper-inner-container and removing float: left. It will then automatically size to 100% available space because it's a block element.
https://jsfiddle.net/bdxs8x9r/4/ (updated)
Also here's an example of how you can achieve it a bit more consistently with flex-box:
The trick here is that wrapper-sidebar has a fixed width and wrapper-inner-container flexes to it's remaining space in the container.
https://jsfiddle.net/bdxs8x9r/3/
To do this, you must be creating a parent container which contains the main container, which you'll set its overflow to hidden and its width to 100vw
then set the main container width to 100vw plus the sidebar size, so this way the sidebar will have the space to push the inner-container into
<style>
.overflow {
width: 100vw;
overflow: hidden;
}
.container {
width: 115vw;
}
.wrapper-sidebar {
float: left;
width: 15vw;
}
.wrapper-inner-container {
width: 100vw;
float: left;
}
</style>
<script>
// do your animation code here
</script>
<div class="overflow">
<div class="container">
<div class="wrapper-sidebar"></div>
<div class="wrapper-inner-container"></div>
</div>
</div>
I have two div's, one nested within the other. The main div has the css property max-width:100% so that it cant go wider than the users screen. Now, the second div is very wide (1400px), and contains lots of other elements, but not all on the edges need to be seen. So, how (ideally without Javascript) can I have the second wide div centered within the first div, so that when the users screen is only 1000px wide, instead of the first 1000px of the wide div being shown and the remainder cropped, have 200px cropped from the left and right, with the 1000px being taken from the center?
CODE
<div style="max-width:100%">
<div style="position:relative;width:1400px">
<!-- PICTURES, LINKS, ETC -->
</div>
</div>
You can achieve this with a technique called shrink wrapping. You will need an additional div wrapping the large inner div that pulls it relatively to the left. The inner div can correct itself and pull itself halfway over to the right compared to its container. This should have the effect you seek.
<div class="max-width-container">
<div class="shrink-wrap">
<div class="very-wide-inner-div"></div>
</div>
</div>
.shrink-wrap {
float: right;
position: relative;
left: -50%;
}
.very-wide-inner-div {
position: relative;
left: 50%;
width: $some_huge_number;
}
http://jsfiddle.net/2j2mh/
assuming your html looks something like this:
<div class="narrow"><div class="wide">blah de blah</div></div>
think you may be able to do it with something like this:
.narrow {width:1000px; overflow:hidden;}
.wide {width:1400px; position:relative; left:50%; margin-left:-700px;}
the margin-left is half of the width of the .wide div
if you inspect the element in the fiddle you will see it is sat in the middle
http://jsfiddle.net/peteng/dtNKr/4/
I want to know how this theme gets the effect of the items in the lower right disappearing as the screen gets smaller.
http://themeforest.net/item/jr-photography-wordpress-theme/full_screen_preview/1163891?ref=takeaction
I have items in the lower right but when the screen is too small They move down instead of disappearing like this. Any comments or links how to get this effect would be great! Thank you.
Not media but rather CSS floating solution
I haven't checked source code of the particular site, you're linking, but I've created a simple CSS solution that hides right-hand side elements when there's no more space for them because of the left hand side elements.
Here is a JSFiddle. Resize the window width (or drag the columns in to resize content quadrant width) so the two elements become too wide for the container width. The right-content will automatically disappear.
What it does?
You have footer container with two additional containers, floated left and right. All three of them must define the same height while:
footer defines overflow: hidden so anything that goes beyond lower visible viewport will not be displayed.
other two are then just floated within to left and right
Floating then makes care of everything. When there's not enough space to accommodate floated elements by with they start to render underneath where there's enough space. But displaying underneath hides them because container element has a limited height.
<div class="footer container">
<div class="left container">left content</div>
<div class="right container">right content</div>
</div>
And simple CSS (including just relevant settings):
.container {
height: 2em; /* all containers have the same height */
}
.footer {
overflow: hidden;
}
.left {
float:left;
}
.right {
float: right;
}
I have never thought that writing a simple two column layout is so complicated using css....haha
What I want to do is the following:
When the height of the content div exceed the height of screen size, scroll bar exist only in the content div. The users can only scroll the content div but the sidebar keeps static
The two columns should have the same height
My layout is:
<---------------container------------------->
<-------------------header------------------>
<-----sidebar-------><---------content--->
<------------------footer------------------->
<---End of container------------------------->
Here is my css file:
http://137.189.145.40/c2dm/css/main.css
#WorldContainer
{
width: 1000px;
margin: auto;
overflow: hidden;
}
.ContentColumn
{
float: left;
width: 500px;
overflow: auto;
}
<div id="WorldContainer">
<div class="ContentColumn">
Content goes here!
</div>
<div class="ContentColumn">
Content goes here!
</div>
</div>
That will give you a page where the main div cannot scroll but the two div columns can. They will be side by side. You question wasn't exactly clear so hopefully this is what you were after.
EDIT: In response to you showing the example site.
Your problem is really simple.
All of your divs have a height rule of height: 100%;
When you use percentage height, you are making it a percent of the container it is within, i.e Its parent container. It is NOT a percentage height of the entire window.
Every container is specifying a percentage height so the result is a height of 0.
Give your outermost div a fixed height and the problem will be resolved.
Additional Edit:
If you are concerned with making sure the outermost div always stretches to the bottom of the window then this is a css solution using absolute positioning:
#OutermostDiv
{
position: absolute;
top: 0;
bottom: 0;
}
Using this approach still causes a calculated height even though the outer div doesn't have a hard coded height. This will allow you to use percentage heights on your inner divs and maintain a outer div that stretches from top to the bottom of the visible window.
You'd have to set your container element to overflow:hidden;, and your content div to overflow:scroll; (and possibly do overflow-x:hidden; to hide the horizontal scrollbar). The problem with this is that if your sidebar & content are going to be the same height, then you would have to have TWO scrollbars - one for content, and one for sidebar.
You could probably solve this by using another container element around just sidebar & content, and setting the overflow: scrollbar; overflox-x:hidden; on it instead of sidebar/content.
You can also use display:table and display:table-cell to create columns if you're facing difficulties with float. Here's the CSS:
#container
{
width:960px;
margin:0;
padding:0;
display:table;
}
#sidebar
{
width:300px;
display:table-cell;
}
#content
{
width:660px;
display:table-cell;
}
and the HTML is:
<div id="container">
<div id="sidebar">
<!-- Sidebar Content Here -->
</div>
<div id="content">
<!-- Content Here -->
</div>
</div>
Hope this solves your problem. But display:table doesn't work in some old browsers.