I am trying to keep the header still and have the rest of the content scroll underneath it. I am able to achieve this, however when I put a fixed position on my two header divs the break out of the margin auto.
css:
.structure {
width:960px;
padding:20px;
margin:0px auto 0px auto;
background:#121212;
border-left:5px #F06BA8 solid;
border-right:5px #F06BA8 solid;
}
.header_home_structure {
width:960px;
margin:0px auto 0px auto;
position:fixed;
height:80px;
}
.header_home_bg {
width:100%;
background:#121212;
border-bottom:3px #F06BA8 solid;
height:80px;
position:fixed;
}
html:
<body>
<div class="header_home_bg clearfix">
<div class="header_home_structure clearfix">
</div>
</div>
<div class="structure clearfix">
</div>
</body>
Just use position: fixed on the container div, don't use it twice
Demo
.structure {
width:960px;
padding:20px;
margin:0px auto 0px auto;
background:#121212;
border-left:5px #F06BA8 solid;
border-right:5px #F06BA8 solid;
}
.header_home_structure {
width:960px;
margin:0px auto 0px auto;
height:80px;
}
.header_home_bg {
width:100%;
background:#121212;
border-bottom:3px #F06BA8 solid;
height:80px;
position:fixed;
}
Related
Hello I have a question about centering a frame div inside a parent div.
I would like to center the frame inside the page, which is 70% wide, but I just cant make it work. I woud like the frame to be inside the parent div WRAP and the WRAP div inside the MAINWRAPPER which is 70% wide.
Please help :)
html{
background-color:#EEE;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-size:16px;
color:#888;}
body{
position:absolute;
width:100%;
margin:0px;
padding:0px;
}
#MAINWRAPPER {
min-height:100%;
position:absolute;
right: 0;
left: 0;
margin:0 auto;
padding:0;
width:70%; /* page width */
background-color: #39f;
border:1px solid #959595;
}
#WRAP {
position:relative;
display:block;
margin:0 auto;
border:1px solid red;
}
.frame {
width:100%;
height:300px;
position:relative;
float:left;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
.frame a{
display:block;
width:100%;
height:100%;
color:#333;
}
.frame a:hover{
display:block;
color:#FFF;
}
.title {
display:block;
position:absolute;
overflow:hidden;
top:0;
background-color:#ccc;
padding:3px 0;
width:100%;
height:auto;
border-bottom:1px solid #959595;}
div.price {
display: block;
position: absolute;
bottom: 1px;
right: 0;
height: 1.6em;
width: 3em;
background-color: #33CCFF;
border-radius:5px;
border:2px solid #FFF;
color:#FFF;
font-size:1.2em;
font-weight:bold;
text-align:center;
}
<body>
<div id="MAINWRAPPER">
<div id="WRAP">
<div class="frame"><a href="#">
<object class="title">TITLE</object></a><div class="price">50</div></div>
</div>
</div>
</div>
</body>
Remove width and float from .frame and try like this: Demo
.frame {
height:300px;
position:relative;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
How to center a div inside a page container in your HTML page :-
Just add following bootstrap class to do this in your HTML page :-
text-center col-md-offset-2
Description :-
Here offset value is the margin from the left hand side so by increasing decreasing the value of the offset you can set the margin.
I use CSS to style aside. After applying this style, aside moves to left but I want it at the right of the page. I want aside to have a height that is relational to the container. i.e. I want its bottom margin to touch the top of the footer no matter what is the height of the container.
Style:
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
position:absolute;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}
Remove position: absolute;. If you want to keep position: absolute; you can add right: 0; instead.
html,body{
height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
height: 100%;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}
<aside>I'm at the right side</aside>
As Gustaf said, you have to remove the 'position: absolute' to switch the side. To define the height, all the parents of element, needs to have a defined height, so the children element will have a reference to render your own height, like this:
html, body{
height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
height: 100%;
}
<html>
<head></head>
<body>
<aside>I'm at the right side</aside>
</body>
</html>
What is going on here, I has tried floating the spans to the left, I have tried displaying them inline-block, inline ect... nothing seems to be working, I want any spans in the "filters" div to all go next to each other on a horizontal line!
HTML:
<div class="filters">
<span style="background-image:url(images/filters/grayscale.jpg)">Grayscale</span>
<span style="background-image:url(images/filters/smooth.jpg)">Smooth</span>
<span style="background-image:url(images/filters/contrast.jpg)">Contrast</span>
<span style="background-image:url(images/filters/brightness.jpg)">Brightness</span>
<span style="background-image:url(images/filters/colorize.jpg)">Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
you have to change your code in the following way,
.filters {
position:relative;
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
then for each span, you have to change left: 0px to the amount you want the filter effect to move from the left side.
.filters span {
position:absolute;
left: 0px;
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
I have added position:relative; on filter box,
and position: absolute; and left: 0px;
Change the width from 100% to a larger value (in % or px) and a containing div if you want the user to scroll horizontally through the spans.
SEE JSFIDDLE EXAMPLE
.container {
width:300px;
height:8em;
overflow-x:scroll;
overflow-y:hidden;
}
.filters {
background-color:#1a1a1a;
height:8em;
width:1000px;
border-radius:0px 0px 15px 15px;
}
<div class="container">
<div class="filters">
...
</div>
</div>
Edit: Solution
Here is you fiddle working: Working jsFiddle here
Original Answer
Use white-space: nowrap; css for surrounding container. If you want to get rid of autospaces between the spans as well concatenate them with <!-- --> html comments.
HTML:
<div class="filters">
<span>Grayscale</span><!--
--><span>Smooth</span><!--
--><span>Contrast</span><!--
--><span>Brightness</span><!--
--><span>Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
white-space: nowrap; /* added */
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
/*float:left; removed*/
}
I'm trying to make responsive design.
DEMO http://jsfiddle.net/tbuU8/
It should be something like this image.
There are mainly 2 section such as Left and Right.
Left section is fixed with 300px width.
About Right section, it can be shrink(narrow) down to 300px.
When if it's narrower than that, right section should be shown on the bottom just like the image below.
right section should stay in right, unless width is narrowed down to under 300px.
when if it's under 300px, it should be shown in the bottom.
It needs break at the edge of right section when if it's long length text
In my demo, it shows right section on the bottom when the length of the character is long.
it needs break and starts at new line. It always try to show that in 1 line.
How can I show right section on the right part, and text in that needs break.
Output that I want
July 22, 2013 11:34 Helloooooooooooooooooooooooooooooooooooooooooooooo <= need break!
John Smith ooooooooooooooooooo!
Avatar
HTML
<div class="Row">
<div class="Box">
<div class="Left">
<div class="posted_at">July 22, 2013 11:34</div>
<div class="user">John Smith</div>
<div class="avatar">avatar</div>
</div>
</div>
<div class="Box">
<div class="Right">
<div class="body">Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>
<div class="image"></div>
</div>
</div>
</div>
CSS
div.Row{
border:1px solid rgb(0, 0, 0);
min-width: 300px;
width: 100%;
background-color:#ffffff;
margin-bottom: 20px;
margin-right: 20px;
float:left;
display:block;
}
div.Box{
padding:0px;
text-align:center;
float:left;
}
div.Left{
width:300px;
padding-top:5px;
padding-bottom:15px;
text-align:center;
color:#000000;
clear:both;
}
div.LeftImage{
margin: 15px 15px 15px 15px;
}
div.Right{
padding-top:15px;
padding-right:10px;
text-align:left;
color:#000000;
clear:both;
min-width: 300px;
word-break: break-all;
}
div.posted_at{
padding:5px;
}
div.icon{
display:inline-block;
padding: 10px;
}
div.icon img{
width:100%;
height:100%;
}
use this
.Row{
border:1px solid rgb(0, 0, 0);
width: 300px;
background-color:#ffffff;
margin-bottom: 20px;
margin-right: 20px;
float:left;
display:block;
}
.Box{
width:700px;
padding:0px;
text-align:center;
float:right;
}
try this
div.Row
{
border:1px solid rgb(0, 0, 0);
min-width: 300px;
width: 100%;
background-color:#ffffff;
margin-bottom: 20px;
margin-right: 20px;
float:left;
display:block;
}
div.Box
{
padding:0px;
text-align:center;
float:left;
}
div.Left
{
width:300px;
padding-top:5px;
padding-bottom:15px;
text-align:center;
color:#000000;
clear:both;
}
div.LeftImage
{
margin: 15px 15px 15px 15px;
}
div.Right
{
padding-top:15px;
padding-right:10px;
text-align:left;
max-width:300px; word-wrap:break-word;
}
I have the:
.events-cont {
width:100%;
height:250px;
overflow:scroll;
overflow-y:hidden;
float:left;
position:relative;
margin-top:20px;
display:block
}
.events {
width:210px;
height:250px;
position:relative;
float:left;
margin:0 10px;
padding:0;
border-right:3px #666 solid;
}
And I want a lateral scroll of manys .events divs repeatedly like the img in the link.
http://i.stack.imgur.com/tEyrY.jpg: