Right now I have a div that I need to have over 100vw in width in order to get the effect I want. What I don't want is for the div to go off the right side of the screen. I want the view to stay at 100vw, no horizontal scroll bar. I have tried overflow: hidden; and overflow-x:hidden; and it is not working.
CSS
.stripe {
height: 500px;
width: 150vw;
top: 350px;
margin-left: -30vw;
position: absolute;
background-color: #4775de;
transform: rotate(6.2deg);
z-index: -1;
}
HTML
<div styleName='hero'>
<div>
<div styleName="stripe"/>
</div>
<div className="container" styleName="divide-container">
<div styleName="upper-wrapper" >
</div>
<div styleName="lower-wrapper" >
<MainButtonRow/>
</div>
</div>
</div>
Assuming .hero has no padding or margin, give the parent div of .stripe width:100% (or 100vw) and overflow-x: hidden.
You can try to add another div for wrapping the stripe div. and give overflow:hidden. please refer below code.
css
.wrap{position:relative;
width:100%;
height:500px;
overflow:hidden;
}
HTML
<div styleName='hero'>
<div className="wrap>
<div styleName="stripe"/>
</div>
<div className="container" styleName="divide-container">
<div styleName="upper-wrapper" >
</div>
<div styleName="lower-wrapper" >
<MainButtonRow/>
</div>
</div>
</div>
Hiding the overflow in the body tag worked for me when I had this issue.
body {
overflow-x: hidden;
}
Related
I want to make it so that one div can scroll horizontally independently of the other div. Scrolling divs should have a minimum width (e.g. 500px) and not be aligned to the width of the content. The other div has a width of 100%. How can i do this?
<div>
<div #parent style="width: 100%"></div>
<div #child style="position: relative; width: 100%">
<div #child class="child-container"></div>
</div>
</div>
Here is my css:
.child-container {
position: absolute;
overflow: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 500px;
}
I edited the post to be more realistic
What you're looking for is the CSS property overflow-x which will allow you to specify the overflow behavior with CSS.
Here is MDN's documentation on this property.
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
Update
Here is a working example of what you are asking for. If I'm not understanding your question, please let me know.
.padding {
padding:25px;
}
.container {
max-width:400px;
}
.child-container {
background:#dedede;
overflow-x:scroll
}
.child-item {
min-width: 500px;
}
<div class="container padding" style="background:#ededed;">
<div class="padding">
<h1>Parent</h1>
</div>
<div class="child-container padding">
<div class="child-item">
<h1>Hello world</h1>
</div>
</div>
</div>
I am using bootstrap templates and have split the page into a fixed sidebar and the remaining part of the page is one big picture. However the picture will not match the height of the sidebar. There is always a white gap after the picture even though the sidebar has 100% height. So how can i make my picture take up 100% height?
My html:
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<div class="sidebar affix">
</div>
</div>
<div class="col-sm-9 pic">
<div><img src ="homepage/pic5.jpg" class="img-responsive"></div>
</div>
</div>
</div>
My Css:
.row.content {
height: 684px;
}
.sidenav {
height: 100%;
}
.pic .img-responsive {
height: 100%;
}
.pic {
padding: 0;
position: relative;
}
.sidebar {
width: 22.5%;
top: 0px;
}
.pic > div {
position: absolute;
}
Try to change like this
.pic > .img-responsive {
height: 100%;
}
You are placing your img in an div which you give position absolute, while you give the img position relative in the div with position absolute.
position: absolute
Places an element absolute, meaning on its self. There for any heights or width of any elements around it will not effect the element, it is absolute.
I havent tested it but you should remove the position:absolute, position:relative and the div around your img.
I have an image within a parent div. I also want to have some text underneath the image within that parent div, but I only want the width of that text div to be as large as the image.
<div class="parent">
<div class="child">
<div class="image-container">
<img src="..." />
</div>
<div class="text">
...
</div>
</div>
</div>
Here is a jsfiddle that illustrates my problem:
jsfiddle
How can I resolve this? I can't put the text inside the same div as the image because the image is cut off using a max-height css.
Is this what you were after? Can you use jquery?
$('.child').width($('.image-container').width());
http://jsfiddle.net/YRYZA/
I simplified your markup and css a little bit. You can keep them in the same parent. use position absolute for the text and add position relative to its parent. that way it will take the parent's width. and the parent's width will be set by whatever size the image is, hence the text will be the same width as the image at the end of the day.
html:
<div class="parent">
<div class="image-container">
<img src="http://lorempixel.com/400/600/" />
<div class="text">
text
</div>
</div>
</div>
CSS:
.parent {
width: 700px;
}
.image-container {
background: green;
float:left;
position: relative;
}
div.text {
background: green;
position: absolute;
width:100%;
left:0;
}
jsfiddle
Do this:
.child{ position: relative; }
.text{ position: absolute; left: 0px; right: 0px; }
Then .child div would be as wide as the image (not influenced by .text width) and .text would fit in the space.
JSFiddle: jsfiddle.net/8hV2E/12
HTML:
<div class="shortList" id="unselShortList">
<div id="Value1">A</div>
<div id="Value2">B</div>
<div id="Value3">C</div>
<div id="Value4">D</div>
<div id="Value5">E</div>
<div id="Value6">F</div>
<div id="Value7">G</div>
<div id="Value8">H</div>
<div id="SubmitValue">
<div id="submit">OK</div>
</div>
</div>
CSS:
#unselShortList {
background-color: red;
overflow: scroll;
height: 150px;
position: relative;
}
#submit {
position: absolute;
}
jsfiddle: http://jsfiddle.net/iyogesh/4sxNg/
'OK' Hyperlink is coming inside div.
How can I move 'OK' link out of scrolled div and show it after div using CSS without changing html structure?
Check this fiddle
add a parent element
<div id="unselShortList">
<div class="shortList" >
<div id="Value1">A</div>
<div id="Value2">B</div>
<div id="Value3">C</div>
<div id="Value4">D</div>
<div id="Value5">E</div>
<div id="Value6">F</div>
<div id="Value7">G</div>
<div id="Value8">H</div>
<div id="SubmitValue">
<div id="submit">OK</div>
</div>
</div>
</div>
CSS
#unselShortList {
position: relative;
padding-bottom:31px;
}
.shortList{
height: 150px;
background-color: #33cccc;
overflow: scroll;
margin-bottom:25px;
}
#submit {
position: absolute;
}
#SubmitValue{
position:absolute;
bottom:0;
}
Simple answer:
You CANT
(unfortunately)
Because you've specified overflow on the parent container, you cannot position child content outside of its limits. You can see the effect of this here (without) vs here (with)
In this case you will need to implement a change in your HTML, or look at other styling options- such as overlaying the button in the top right of the div or using javascript to reposition/add an element into the DOM
try:
#submit {
position: fixed;
}
My wrapper div is not expanding in height by it's content. On the other hand, it expands by the header div on the page, and the nav div, but not by the sidebar which lies inside another div. Here is the HTML:
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
nav content goes here
</div>
<div id="pagecontent">
<div id="sidebar">
some sidebar stuff like login form
</div>
</div>
</div>
and the CSS (only the necessary css, not like webkit box shadows):
#wrapper {
width: 900px;
margin: 0 auto;
padding-bottom: 80px;
}
#header {
height: 160px;
width: 100%;
}
#nav {
width: 100%;
height: 40px;
}
#sidebar {
float: right;
width: 140px;
height: 100%;
}
#pagecontent {
width: 900px;
}
the sidebar, which has height 100%, goes outside the wrapper div, you could look at it on http://craftersinn.net
You've missed to add css rule overflow:hidden in #wrapper css.
Add overflow: hidden; to your wrapped CSS, also make sure your selectors are actually selecting elements:
<div id="pagecontent">// remove page
#content {
http://jsfiddle.net/Kyle_Sevenoaks/bPT49/
Add <div style="clear: both;"></div> after
<div id="sidebar">
some sidebar stuff like login form
</div>
You should read this article on floats, especially the section "Clearing the Float".
In short, you can use clear: both, overflow: hidden or the clearfix method. Good luck!
Here discussed the same problem. Check for clearing floats solution and explanation about overflow: hidden;
css box model does not stretch using padding