Here's what I'm trying to achieve: I want to have a sticky header, below it and adjacent to it a sticky div (which will contain an image, and it's height may vary, depending on the attached image size); below this sticky image container I want to have a div which will contain a gallery of smaller divs, and the gallery div must be scrollable, of course. Here's what I have so far:
HTML:
<body>
<header>
<div id="header_content">Header title</div>
</header>
<section>
<div id="div_main_image_container">
<div id="div_main_image">
<img id="img_main" src="http://imageshack.com/a/img543/2281/iu7x.jpg" />
</div>
</div>
<div id="gallery">
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
<div class="div_item_container">1</div>
<div class="div_item_container">2</div>
<div class="div_item_container">3</div>
<div class="div_item_container">4</div>
<div class="div_item_container">5</div>
<div class="div_item_container">6</div>
</div>
CSS
body { font-family:Verdana, Calibri, Arial, Helvetica, sans-serif; }
header { background:#000; height:60px; left:0; position:fixed; width:100%; top:0; }
#header_content{ line-height:60px; margin:0 auto; width:785px; color:#fff; }
section
{
height:auto;
left:0;
position:fixed;
width:100%;
top:60px;
}
#div_main_image_container
{
margin:auto;
width:785px;
color:#399;
background-color:#E0E0E0;
overflow:hidden;
margin-bottom:10px;
border-radius:0 0 3px 3px;
}
#div_main_image
{
margin:5px;
width:775px;
overflow:hidden;
border-radius:3px;
}
#div_main_image img { border-radius:3px; }
#gallery
{
margin:auto;
width:785px;
color:#399;
background-color:#fff;
}
.div_item_container
{
width:235px;
padding:5px;
float:left;
margin-right:25px;
background-color:#E0E0E0;
border-radius:3px;
margin-bottom:20px;
}
.div_item_container:nth-child(3n+0) { margin-right:0; }
Here's the full working code:
http://jsfiddle.net/272ww/5/
I can't make the gallery div be scrollable. I tried to place it outside the , but I can't make it to be exactly below the sticky image div. I also can't make it be fixed in a position, since the image div's height may change from image to image.
How can it be done?
Update css
section
{
height:auto;
width:100%;
padding-top:60px;
}
#div_main_image_container
{
position:fixed;
top:80px;
margin:auto;
width:785px;
margin-left:50%;
left:-392px;
color:#399;
background-color:#E0E0E0;
overflow:hidden;
margin-bottom:10px;
border-radius:0 0 3px 3px;
}
jQuery to Set Position
var headerHeight = $('#header_content').outerHeight(),
imgHeight = $('#div_main_image_container').outerHeight();
myPaddingTop = headerHeight + imgHeight;
$('#gallery').css({
paddingTop: myPaddingTop
})
Update Demo
First of all, you need to remove position:fixed; from your section, that will make page scrollable. As for the other contents, I'm afraid I need further explanation :(
Related
I have a sidebar and I want it to fit the browser height.So I used 100vh.
It does work if I deleted the p element(with the background-text class).
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
But when I keep the p element It doesnt work
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
<p class="background-text">Background :</p>
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
How can I keep the p element and still make the sidebar fit the browser screen height (sorry for my bad english).
if you add float:left to sidebar it works:
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
float:left;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
<p class="background-text">Background :</p>
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
for an overview on css designing principles take a look at this!!
I only need one column on my index page and I want it to be on the right side of the screen. I am using a background image that has what I want on the left. bg-image is in the body
I am trying this approach but it is not getting all the way to the right. Am I going about this wrong and more generally how do you position one column to the right of the screen?
<div style=" float:right" >
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
css for the four inner divs
body{
background-image: url(images/splashpage.jpg);
background-position:top;
font-family: Arial, Helvetica, sans-serif;
}
.one{
<!-- width:40%; -->
background-color:lightblue;
font-family: Arial, Helvetica, sans-serif;
position:relative;
<!-- left:150px; -->
}
.two{
width:580px;
background-color:lightgreen;
position:relative;
right:100px;
top:50px;
}
.three{
width:600px;
background-color:blue;
position:relative;
right:100px;
}
.four{
width:580px;
position:relative;
left:20px;
margin: 0 auto;
top:50px;
}
.footer{
width:580px;
text-align:center;
position:relative;
top:50px;
this was working fine for the containing div to float right, but all this was doing was putting the inner divs side by side and I need them to stack.
<div style=" float:right" class="container" >
<div class="one" style="float:right"></div>
<div class="two" style="float:right"></div>
<div class="three" style="float:right"></div>
<div class="four" style="float:right"></div>
</div>
so I put a clear div in between each and now the container div floats right as well as the inner divs while stacking. It seems simple now but maybe if someone else has this problem this will help.
<div style=" float:right" class="container" >
<div class="one" style="float:right"></div>
<div style="clear:both"></div>
<div class="two" style="float:right"></div>
<div style="clear:both"></div>
<div class="three" style="float:right"></div>
<div style="clear:both"></div>
<div class="four" style="float:right"></div>
</div>
not sure if its best practice or if there's a more efficient way but it works.
I'm using div instead of table but I am not getting the border increased while the content increase in a column.
<div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">am unable to get the white space between col while the content increases</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
.divTable{
display:table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;
}
.divRow{
display:table-row;
width:auto;
clear:both;
background-color:#ccc;
}
.divCell{
float:left;
display:table-column;
width:100px;
border-left: 2px solid #fff;
}
Kindly go through the link below:
http://jsfiddle.net/vasanthanvas/H4Zug/
You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}
http://jsfiddle.net/4Y6cJ/3/
Below is my code :
<div id="footer">
<div id="left_footer">
<div id="img_left" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
<div id="right_footer">
<div id="img_right" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
</div
CSS:
#footer {
width:500px;
position:relative
}
#left_footer{
float:left;
}
#right_footer{
float:right;
}
I am trying this code but my image is not aligned to center its always aligned to left in left footer and to right in right footer. Please suggest !
I would approach the layout like this:
http://jsfiddle.net/yWmZ5/1/
HTML
<div id="footer">
<div id="left_footer">
<img src="http://placekitten.com/100/100" />
</div>
<div id="right_footer">
<img src="http://placekitten.com/100/100" />
</div>
</div>
CSS
#footer { width:500px; position:relative; overflow:hidden; }
#left_footer{ width:250px; float:left; text-align:center; background:orange; }
#right_footer{ width:250px; float:right; text-align:center; background:yellow; }
Make sure you strip all styling (eg - align, etc) out of your HTML and put it in your CSS.
Try this style:
#footer > div{width:50%}
your div#left_footer and div#right_footer need to have some width, in order to display the content in the middle
change your corresponding css to this:
#left_footer{
text-align:center;
float:left;
width:50%;
}
#right_footer{
float:right;
width:50%;
}
see this fiddle
http://denartcc.org/images/help.jpg
As you can see from the arrows in my attached picture, I'm trying to slide those four divs (Who's Online, Upcoming Events, Statistics, and Weather) UP to fill the void. The column on the right has a variable height, and when it expands, those four aforementioned divs continue to move down the page. They need to stay underneath the white box.
The problem with absolute positioning is that the four divs (Who's Online, Upcoming Events, etc.) will also have variable heights, so I don't want to stick the second row of those in an absolute position.
HTML
<div id="TopContentWrapper">
<div id="phototicker">
<jdoc:include type="modules" name="phototicker" />
</div>
<div class="RightSide">
<div class="rtsidemod">
<div class="rtsidetitle">Control Panel</div>
<div class="rtsidecontent"><jdoc:include type="modules" name="controlpanel" /></div>
</div>
<div class="rtsidemod">
<div class="rtsidetitle">Newletter</div>
<div class="rtsidecontent"><jdoc:include type="modules" name="newsletter" /></div>
</div>
<div class="rtsidemod">
<div class="rtsidetitle">Event Notifications</div>
<div class="rtsidecontent"><jdoc:include type="modules" name="eventnotifications" />Check Check</div>
</div>
<div class="rtsidead">
<img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/forum.png"></img>
</div>
<div class="rtsidead">
<img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/ts.png"></img>
</div>
<div class="rtsidead">
<img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/ts.png"></img>
</div>
</div>
<div class="midbox1">
<div class="modbox">
<div class="modtitle">Who's Online
</div>
<div class="mid1">
<p class="mid"><jdoc:include type="modules" name="whosonline" /></p>
</div>
</div>
<div class="modbox">
<div class="modtitle">Upcoming Events
</div>
<div class="mid2">
<p class="mid"><jdoc:include type="modules" name="upcomingevents" /></p>
</div>
</div>
</div>
<div class="midbox2">
<div class="modbox">
<div class="modtitle">Statistics
</div>
<div class="mid1">
<p class="mid"><jdoc:include type="modules" name="statistics" /></p>
</div>
</div>
<div class="modbox">
<div class="modtitle">Weather
</div>
<div class="mid2">
<p class="mid"><jdoc:include type="modules" name="weather" /></p>
</div>
</div>
</div>
</div>
CSS
#TopContentWrapper {
width:920px;
margin:0 auto;
position:relative;
}
div.RightSide {
width:255px;
float:left;
margin-left:5px;
}
div.rtsidemod {
float:left;
width:100%;
padding-bottom:5px;
background-image:url(../images/rightbg.png);
background-repeat:repeat-y repeat-x;
}
div.rtsidetitle{
font-weight:bold;
color:white;
font-size:12px;
background-image:url(../images/rttitlebg.png);
background-position:top left;
height:15px;
}
div.rtsidetitle:hover {
background-position:bottom left;
}
div.rtsidecontent {
font-size:11px;
color:white;
}
div.rtsidead {
width:255px;
float:left;
margin:5px 0 0 0px;
border:1px solid black;
}
div.modtitle {
width:322px;
height:15px;
font-size:12px;
color:white;
font-weight:bold;
background:url(../images/midmodbg.jpg);
background-repeat:repeat-x;
}
div.mid1 {
display:block;
float:left;
background-image:url(../images/midmodcontentbg.png);
background-repeat:repeat-both;
width:320px;
border:1px solid black;
border-top:none;
height:70px
}
div.mid2 {
display:block;
float:left;
background-image:url(../images/midmodcontentbg.png);
background-repeat:repeat-both;
width:320px;
border:1px solid black;
border-top:none;
height:70px
}
div.modbox {
float:left;
width:310px;
margin-right:19px;
margin-top:5px;
}
div.midbox1 {
float:left;
width:660px;
margin:0px 0 0px 5px;
padding:0;
}
div.midbox2 {
float:left;
width:700px;
margin:0px 0 0px 5px;
padding:0;
}
Rearrange your divs to be in 2 columns rather than 4 quadrants. You currently have:
<div id="phototicker">
...
</div>
<div class="RightSide">
...
</div>
<div class="midbox1">
...
</div>
<div class="midbox2">
...
</div>
Instead, arrange them like this:
<div class="LeftSide">
<div id="phototicker">
...
</div>
<div class="midbox1">
...
</div>
<div class="midbox2">
...
</div>
</div>
<div class="RightSide">
...
</div>
That way, the midboxes will naturally flow under the phototicker. You will need to have a specific width on the right and left side divs and then just float the both left.