Hello budding web enthusiasts. I am afraid that I am in quite a pickle and need a helping hand.
In a current web project, I ran into a sour wall. This here is the code. Take a gander. From the code, it does exactly what I want. But here is the problem.
There are scrollbars on the div. I dont want any scrollbars on my divs. I tried overflow-y:scroll; and got rid of the horizontal scrollbar but the vertical scrollbar is still there. I tried a lot and searched for it but to no avail.
How can I get rid of both the vertical and horizontal scrollbars in my divs with it still bieng able to scroll.
edit : I also need it to be cross browser functional. not only chrome.
HTML
<div id="content">
<div id="left">
<div class="richyPhoto"> </div>
</div>
<div id="right">
</div>
</div>
CSS
body {
overflow:hidden;
}
#content, html, body {
height: 100%;
width:100%;
margin:0;
padding:0;
}
#left {
float: left;
width: 50%;
background: red;
height: 100%;
overflow: scroll;
}
#right {
float: left;
width: 50%;
background: blue;
height: 100%;
overflow: scroll;
}
I would use this technique:
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow: auto;
padding-right: 15px; /* Increase this value for cross-browser compatibility */
}
Here's a working Fiddle: http://jsfiddle.net/5GCsJ/954/
Here is a way to do it:
HTML
<div id="content">
<div id="left">
<div class="richyPhoto"> </div>
</div>
<div id="right">
<div class="richyPhoto2"> </div>
</div>
</div>
CSS
body {
overflow:hidden;
}
#content, html, body {
height: 100%;
width:100%;
margin:0;
padding:0;
}
#left {
float: left;
width: 50%;
background: red;
height: 100%;
overflow: hidden;
}
.richyPhoto {
width: 100%;
height: 99%;
border: 1px solid red;
overflow: auto;
padding-right: 15px;
}
#right {
float: left;
width: 50%;
background: blue;
height: 100%;
overflow: hidden;
}
.richyPhoto2 {
width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
Working Fiddle link: No scrollbars scroll
Related
I have attempted to rectify this problem for far too long, and am not getting anywhere.
I am trying to align three inline-block divs horizontally using text-align: justify within their parent div, but with no luck. I have done something similar in the past, and I have read other threads that state I am going about it correctly.
I am attempting to learn the codeIgniter framework, but not sure if that is relevant.
I am also using Aptana for the first time. Again, not sure if that has any affect (can’t see how it would).
Maybe the solution is right in front of me, but any help would be appreciated. Thanks.
HTML:
<div about="homeContent" class="pageContent">
<h1>Home</h1>
<div id="threeColumn" class="threeColumnDiv"> <!--Define id and class-->
<div id="One" class="threeColumnElement">
</div>
<div id="Two" class="threeColumnElement">
</div>
<div id="Three" class="threeColumnElement">
</div>
</div>
</div>
CSS:
html, body{
height: 100%;
}
html{
}
body {
margin: 0px;
}
#wrapper{
width: 960px;
margin: 0px auto;
min-height: 100%;
}
/****HEADER*****/
#headerBanner{
height: 100px;
width: 960px;
background-color: green;
}
#leftHeaderBanner{
}
#rightHeaderBanner{
}
/****Home****/
#threeColumn{
text-align: justify;
}
#One{
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
#Two{
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
#Three{
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
/****FOOTER****/
/***STICKY FOOTER FROM http://www.cssstickyfooter.com/using-sticky-footer-code.html*/
#footerBanner{
width: 960px;
background-color: blue;
margin: 0px auto;
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
#leftFooterBanner{
}
#rightFooterBanner{
}
Use text-align:center instead of text-align: justify; in #threeColumn
#threeColumn{
text-align: center;
}
Working Fiddle
I am trying setup a design where I would like a left bar for navigation and things that remains fixed and doesn't scroll, but have a content box next to it that does scroll as needed. The problem I'm running into, if I position: fixed; the first DIV it technically does what I want, but it overlaps the second DIV. I'm just creating this and using JsFiddle to test easily, so I don't have an actual working code other than this fiddle. I'll admit, I've been awake for about 30 hours now, so if this is a really silly oversight from me, please forgive me. Thanks!
FIDDLE
I tried to write this code and it is responsive too.
* {
padding: 0px;
margin: 0px;
}
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
#two {
box-sizing: border-box;
padding: 20px;
position: absolute;
left: 25%;
right: 0%;
float: right;
width: 75%;
background: #333;
}
I hope this helps.
When you add position:fixed the element is taken out of the flow and its basically functions in respect to the window .
so the following CSS :
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
25% is 25% of the window not 25% of <div id="wrap">(and hence the overlap) , if you take off the position:fixed you'll see no overlap .
with position fixed , you probably want to have some left offset on <div id="two">, you cal experiment with :
margin-left: // DO YOUR MATH.
padding-left: // DO YOUR MATH.
You already have height: 400px; on your over div so specify the height to #one too http://jsfiddle.net/ypL8ypsf/5/
#one {
position:fixed;
width:16%;
background: #666;
height:384px;
}
Hope this will help
This changes in css will solve your problem
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#one {
position: fixed;
width: 25%;
background: #666;
height: 100%;
display:inline-block;
}
#two {
width: 70%;
background: #333;
height: 100%;
display:inline-block;
overflow:hidden;
margin-left:29%;
}
.clear {
clear: both;
}
If you have position :fixed on an element. it can only controlled by the browser window, cannot control by parent div. so if you add width: 25% it fill up 25% of your browser window. not in parent div.
i have 2 solutions,
use javascript. dynamically add width in 'px' and add position:
fixed after
use position: absolute. instead of fixed. ( actually your height is 100% so it doesn't matter your position fixed. )
1nd solution: javascript approach [sample code]:
//remove position:fixed from #one
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var calWidth = $("#one").width(); //get the width
$("#one").css({width:calWidth+'px',position:'fixed'}); //apply to the div
</script>
2nd solution: CSS approach [sample code]
#wrap{
position:relative;
}
#one{
position:absolute;
}
Try overriding your current float and position styles with:
float: left; and
position: relative;
Instead of fixing that DIV, I've float them both to the left and give the second DIV overflow-y scroll property.
Hope this can help you:
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
}
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
overflow:hidden;
}
#two {
float: left;
width: 75%;
background: #333;
height: 100%;
overflow-y: scroll;
}
.clear {
clear: both;
}
If it is not usefull you always can try some framework with default sidebars.
Although you could add some margin to the second div to displace it to the right, I don't think you should use fixed for this.
You should do this:
<div class="div1">This is not moving</div>
<div class="div2"> Loren ipsum...</div>
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.div1{
background: #DDD;
width:40%;
height: 100%;
float: left;
overflow: hidden;
}
.div2{
background: #EEE;
width:60%;
height: 100%;
float: left;
overflow-y:auto;
}
Here is a pen for you: http://codepen.io/vandervals/pen/bdBWJV
I managed to do what you want but by adding more div.
the HTML would be
<div id="wrap">
<div id="testone"><div id="one"></div></div>
<div id="test"><div id="two">Lorem ipsum...
</div></div>
<div class="clear"></div>
and the css then
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#testone{
float: left;
width: 25%;
background: #666;
height: 100%;
}
#one {
position: fixed;
}
#test{
float: right;
width: 75%;
height: 100%;
}
#two {
background: #333;
}
.clear {
clear: both;
}
I know that IE6 is obsolete but my customer still uses IE6.
This project's content segment must be a percentage scale, but when the content's height is very long and user decides to minimize the browser, the content segment jumps to the bottom of side bar.
My code when dashboard_content with longer content
CSS code:
#outer-box {
width:100%;
height: 100%;
position: relative;
overflow: auto;
float: right;
}
#inner-box-1 {
width: 225px;
height: 100%;
background-color:#253740;
float:right;
}
#inner-box-2 {
height: 100%;
direction: rtl;
overflow:auto;
*overflow: inherit;
}
.header {
width: 100%;
height: 100px;
background: url('imgs/pattern.jpg') repeat-x;
}
.dashboard_main_menu_holder {
width: 100%;
height: 50px;
background-color: #fff;
border-bottom: 1px solid #d0d0d0;
}
.dashboard_content {
width: 98%;
margin: 10px;
}
HTML code:
<div id ="outer-box">
<div id="inner-box-1">
<div class="user_image"></div>
</div>
<div id="inner-box-2">
<div class="header"></div>
<div class="dashboard_main_menu_holder"></div>
<div class="dashboard_content"></div>
</div>
</div>
How can i get this fixed in IE6?
Change the %s on the CSS to the amount of px. You can find more information on this link.
I have a problem with HTML.
The #content div wont get the width.
div test is centered, and #menu should have 15% width and #info to.
I tried clear: both; but it wont work...
Maybe its a issue to width 100%.
<!doctype html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
}
#wrapper {
background-color: green;
width: 100%;
height: 100%;
position: fixed;
}
#upper {
height: 15%;
background-color: blue;
}
#test {
height: 85%;
width: 100%;
margin: 0px auto;
}
#test #menu {
width: 15%;
height: 100%;
float: left;
/* scroll bar */
overflow-y: scroll;
overflow-x: hidden;
background-color: red;
}
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="upper">
upper
<!-- logo etc -->
</div>
<div id="test">
<div id="menu">
menu
</div>
<div id="content">
content
</div>
<div id="info">
info
</div>
</div>
</div>
</body>
</html>
Could somebody help me!
The problem is that you are overwriting your declarations:
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
I would recommend the Use of inline-block on the element instead of floating.
although it has is own faults..
http://jsfiddle.net/avrahamcool/gMMHL/1/
Auto margins don't work with percentages. You'll have to give it a fixed dimension in order for the margin centering to work.
I am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}