Of course I realize that this question has been asked, and I'd thought I had the solution with this: https://stackoverflow.com/a/15971409/295133
But that answer only allows content overflow at the bottom, not at the top.
See this example (http://jsfiddle.net/7y2cb/251/):
.wrapper{
width: 400px;
height: 200px;
border: 2px solid red;
position:relative;
top:200px;
}
.inner{
max-width: 100%;
overflow-x: hidden;
border:1px blue solid;
}
.example{
width:600px;
height:500px;
background:green;
position:relative;
left:100px;
top:-200px;
}
<div class="wrapper">
<div class="inner">
<div class="example"></div>
</div>
</div>
I'm wondering there are any workarounds because it affects my site when viewed on an iPad and its scaling.
Related
All:
Right now, I want to implement a horizontal scroll header bar. The layout I used is:
<div id="header_cnt">
<div id="header_mn">
<div class="mn_item">KWD1</div>
<div class="mn_item">KWD2</div>
<div class="mn_item">KWD3</div>
<div class="mn_item">KWD4</div>
<div class="mn_item">KWD5</div>
</div>
</div>
And the style:
#header_cnt {
width:100%;
height:60px;
position: fixed;
}
#header_mn {
background-color: lightyellow;
width:100%;
height:60px;
overflow: hidden;
padding:0px;
}
#header_mn .mn_item {
display:inline-block;
width:200px;
}
The effect I want for first step is:
The header menu fix to top, and all menu items sit in one line and the overflow part get hidden rather than wrap to next line.
[UPDATE] I figure out myself, the way I find out is using FLEXBOX:
Forget structure above,just use some new but similar structure:
<head>
<style>
body, html {
padding:0px;
margin:0px;
}
section {
border: 1px solid gray;
/*padding: 1em;*/
height:300px;
width:100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content:flex-start;
position:fixed;
overflow: auto;
}
div {
min-width: 250px;
height: 50px;
border: 1px solid steelblue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
Thanks
You could use flexbox to create this header, check it out here You can also check out flexbox here
CSS
#header_cnt {
width:100%;
height:60px;
position: fixed;
background:#d7d7d7;
}
#header_mn {
background-color: beige;
width:100%;
height:60px;
overflow: hidden;
padding:0px;
display:flex;
flex-direction:row;
justify-content:space-around;
}
#header_mn .mn_item:first-child{
margin-left:10%;
}
#header_mn .mn_item {
display:inline-block;
width:200px;
align-self:center;
justify-content:center;
}
Hope this helps
You need to float:left on those .mn_item
I still don't have Reputation to comment, so here is my tip.
You can set min-width of #header_mn to a multiple of .mn_item.
What I'm trying to achieve looks like the picture below. Mind the number is the order of each box in the HTML. I don't wish to change the order as it's the order I wish to have for mobile view.
Box 2 and 3 and fixed width and the center ones are fluid.
What I've done so far can be seen on http://codepen.io/anon/pen/wBWPoB
and my problem is that using my solution I have to know the height of the box1 and I don't want to depend on it. Box1 can become much higher and then it'll be hiding box4.
Any ideas?
Please mind I've also tried to use position: absolute for box3 but then box6 will hide parts of it as box3 goes out of the layout completely.
See the output below i tried to make it like your desired out put
Clearing 1st and 6th from both side
Float 3rd,4th,5th to left and making third larger than 4th and 5th
Float 2nd one to right
body{
text-align:center;
width:100%;
}
div{
width:400px;
height:100px;
background:red;
margin-top:5px;
}
div:nth-child(3){
background:green;
float:left;
width:100px;
height:500px;
}
div:nth-child(2){
background:green;
float:right;
width:100px;
height:500px;
}
div:nth-child(6),div:nth-child(1){
background:yellow;
clear:both;
width:100%
}
div:nth-child(4),div:nth-child(5){
width:260px;
float:left;
margin:5px auto;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
The solution (doesn't work well on IE yet) is to use padding instead of margin to get the side columns and then float all boxes. You can see the solution on http://codepen.io/anon/pen/ogLqwa - on IE you'll notice box4 is under box3 even though it should have been adjuscent to box1.
IMPORTANT: note that .one MUST have a border so it doesn't collapse. In the example, all divs have a border so you could notice them easily but without it, it will collapse.
A good friend helped me, guess something it's better than StackOverflow ;)
div { font-size: 30px; border: 2px solid black; }
.container { border: 1px solid transparent; padding-left: 320px; padding-right: 220px;}
.one {height:200px; background: orange; float: left; width: 100%; margin-right: -100%; border: 1px solid black; }
.two { float: right; width: 200px; margin-right: -220px; height: 200px; }
.three { float: left; width: 300px; height: 300px; margin-left: -320px; }
.four {float: left; width: 100%; background: red; }
.five {float: left; width: 100%; background: red; }
.six { clear: both; width: 100%; }
<div class="container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
<div class="six">6</div>
I am working on responsive design. I have div (WebPage_NavigationWrapper) and inside I have floating-left divs (function_block). Now I want to scroll bar in case floating divs cannot adjust in single line; meaning main div height remain same. Due to responsive design I am not using PX so I believe I am not providing height of div, unless I am wrong!
<div id="WebPage_NavigationWrapper" class="TitleHeaderBar_Style_L2">
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
</div>
</div>
CSS
#WebPage_NavigationWrapper{
display: table;
table-layout: fixed;
width:100%;
padding:10px;
overflow-x: scroll;
}
.function_block{
float:left;
padding:2px;
width:120px;
height:60px;
}
.function_block:hover{
background-color:#CDE5F2;
}
.CreateNewEntry_Icon{
margin-left:10px;
width:85px;
line-height:5;
display:inline-block;
background:url("../ImagesAndIcons/Icons/Add_New.png") no-repeat top center;
}
i think this will help you,
replace your code with following
#WebPage_NavigationWrapper{
width:400px;
height: 100px;
padding:10px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid black;
}
.function_block{
display: table-cell;
padding:2px;
width:120px;
height:60px;
}
I want 100% wide divs containing images to go down my page.
On top of these divs, I want one 1210px wide div where I can put my content.
Example:
http://mudchallenger.com/a-responsivee.html
Question:
How can I get the blue box to touch the green box, while red box stays above the two?
Thank you!
I currently have this:
}
#green{
position: absolute;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: green;
}
#blue{
position: relative;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: blue;
}
#red{
position: relative;
float:center;
height: 800px;
width: 1210px;
margin: 0 auto;
z-index:2;
background-color: red;
}
Use background-images to accomplish what you want. Just stack your divs and it should work just fine. If you want your content to span two containers with background images, that's a different story, but the example you cite doesn't do that.
Here's a fiddle giving close to an implementation of what you want. Just replace the container background-colors with background-images and you'd have what you want.
http://jsfiddle.net/CfZu4/
HTML:
<div class="container">
<div class="content">
Blah
</div>
</div>
<div class="container red">
<div class="content">
Blah
</div>
</div>
CSS:
.container{
background-color:#00f;
height:200px;
clear:both;
}
.content{
float:right;
width:40%;
height:150px;
margin-top:20px;
background-color:#0f0;
}
.red{
background-color:#f00;
}
EDIT: Scaled down version for fiddle:
http://jsfiddle.net/dc2bar/asy8Y/2/
HTML:
<div class="background-banner green">
<div class="main-content red">
<!-- content -->
</div>
</div>
<div class="background-banner blue">
</div>
CSS:
.background-banner {
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
}
.main-content {
position: relative;
height: 800px;
width: 70%;
margin: 0 auto;
z-index:2;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
EDIT yet again: removed invalid css rule.
I have a div which scrolls horizontally hooked to some buttons with jQuery. That is working fine, the problem is i have a nested div in the scrollable content which becomes clipped as it overlaps the container. I need overflow on the x axis but not on the y.
overflow-x: hidden, overflow-y visible should solve this, but doesn't. I does work if i remove the overflow, but i need the overflow-x to scroll the div.
Simplified html / css below - without scrolling logic as that is not what is problematic here.. should be easy?
Thanks a million :) Andy
<!DOCTYPE html>
<html>
<head>
<title>TestDiv</title>
</head>
<body>
<div style="width:100%; height:150px; border:1px solid blue">
TOP DIV
</div>
<div class="slide" style="height:150px; width:800px; border: 1px solid blue; background-color: pink;">
<div style="border: 1px solid blue; width:1200px; height:150px;" class="inner" id="slider">
<table cellspacing="0" cellpadding="0" border="2" style="table-layout:fixed; width: 1200px; height:150px">
<tr><td>AAAAAAAAA</td><td>BBBBBBBBB</td><td><div class="container"><div class="testDiv">XXX</div></div>CCCCCCCCC</td><td>DDDDDDDDDD</td><td>EEEEEEEEEE</td><td>FFFFFFFFF</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td></tr>
</table>
</div>
</div>
<div style="width:100%; height:150px; border:1px solid green;">
BOTTOM
</div>
</body>
</html>
<style scoped="scoped">
.slide
{
position:relative;
overflow-x: hidden;
overflow-y:visible;
}
.slide .inner
{
overflow-y:visible;
position:absolute;
left:0;
bottom:0;
padding:0px;
}
.container
{
width: 20px;
height: 20px;
background-color: black;
position: relative;
}
.testDiv
{
width: 235px;
position: absolute;
z-index: 999;
left:20px;
top: -180px;
height: 200px;
background-color: greenyellow;
}
</style>
The issue is that you are using "fixed" positioning. This will only work with "relative" positioning. To convert to relative positioning, you need to remember that the Top location is relative to the previous sibling element, whereas left is relative to the parent element.