I'm working with a twitter widget.
CSS for SITE
#site {
background-color: #FFFFFF;
width: 1000px;
height:100%;
position: relative;
margin: 0 auto;
top:-20px;
box-shadow: 2.5px 4.33px 29px 0px rgb( 0, 0, 0 );
}
Here's my CSS for DIV
#twitter-widget-0 {
position: absolute;
right: 10px;
width:220px;
height: auto;
top:50px;
bottom: 100px;
}
I would like the height to fill the area in between the bottom and top position.
For example if the webpage size was 800px by 2000px. Then the twitter div height would become 1850px, or if the height of the page was 1000px the div would be 850px.
#twitter-widget-0 {
position: absolute;
right: 10px;
width:220px;
height: auto;
margin-top:50px;
margin-bottom: 100px;
}
Does this help?
Where is problem?
For check problem needed see code for outer area.
I think for fix you should just add position:relative; to outer area style.
For example: http://jsfiddle.net/DYtBE/
Related
Take a look at this fiddle: https://jsfiddle.net/hkbynkmf/1/
How do I let the green border flow around all the divs, with no div "overflowing" the border? The upper div is OK, but the lower one is not.
Also, I need some distance between the divs;
I know that padding and margin is transparent, so I chose (a green) border to illustrate my point. In the end, the clearance should be transparent.
HTML:
body {
position: relative;
background-color: #ff0000;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 0px;
border: 10px solid #190;
margin: 0px;
}
#header {
position: relative;
margin:0 auto; /* div will be H-centered */
top: 10px;
left: 0px;
bottom: 0px;
right: 0px;
width: 960px;
height: 250px;
background-color: #DDDDDD;
overflow: hidden; /* Keep all sub-elements inside this div */
}
#intro {
position: relative;
margin:0 auto; /* div will be H-centered */
top: 15px;
left: 0;
bottom: 0px;
right: 0px;
width: 960px;
height: 150px;
background-color: blue;
overflow: hidden; /* Keep all sub-elements inside this div */
}
<body> <!--position: relative;-->
<div id="header"> <!--position: relative;-->
</div>
<div id="intro"> <!--position: relative;-->
</div>
</body>
You're using the top attribute to move your intro div 15px down, below the header. This is causing the 15px overlap with the container. When positioning items this way you should consider using margin to apply the change, rather than the positioning attributes of top, right, bottom or left.
You have a lot going on with your CSS which is making the stylesheet much more complicated than it needs to be. I have simplified your CSS as follows to achieve the same effect:
body {
background-color: #ff0000;
border: 10px solid #190;
margin: 0px;
padding: 0px;
}
a img {
border:none;
}
#header {
background-color: #DDDDDD;
height: 250px;
margin:0 auto;
overflow: hidden;
width: 300px;
}
#intro {
background-color: blue;
height: 150px;
margin:15px auto 0;
overflow: hidden;
width: 300px;
}
See updated fiddle
In your code, the #intro is positioned 15px below the #header. Doing so leaves no place for the div in body.
Not sure what you are trying to achieve here with position: relative; but the #intro can be written like
#intro
{
margin:10px auto;/* div will be H-centered */
width: 300px;
height: 150px;
background-color: blue;
overflow: hidden;/* Keep all sub-elements inside this div */
}
Using the margin top property on the #intro div will allow the green border to flow, while also having the space in between the divs. Here is the fiddle:
https://jsfiddle.net/hkbynkmf/17/
#intro
{
position: relative;
margin:15px auto 0px auto /* div will be H-centered */
left: 0;
bottom: 0px;
right: 0px;
width: 300px;
height: 150px;
background-color: blue;
overflow: hidden; /* Keep all sub-elements inside this div */
}
I have a child div inside a parent div in order to make the child div responsive. I would like to make the parent div responsive as well, but after days of searching I haven't found any solutions.
My Code:
CSS
.parent {
width: 100%;
height: auto;
margin: 0 auto 0 auto;
background-color: #b5b5b5;
overflow: hidden;
position: relative;
}
.css-slideshow {
position: relative;
max-width: 1050px;
height: 345px;
margin: 3.5em auto auto auto;
z-index: 1;
}
.css-slideshow div {
margin: 0;
position: absolute;
max-width:100% !important;
height:auto;
}
.css-slideshow img {
box-shadow: 0 0 2px #666;
max-width:100% !important;
height:auto;
}
HTML
<div class="parent">
<div class="css-slideshow">
<div>
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" />
</div>
</div>
</div>
Here's a jsfiddle.
The grey portion is the parent div that I would like to be responsive so that it's bottom aligns with the bottom of child div (css-slideshow) as resolution decreases. I'm not sure if it makes a difference, but I would like the parent div's height to be responsive, not it's width, which is set to 100% in order to make it stretch across the entire page.
NOTE: The space above the image (child div: css-slideshow) is intentional; it makes room for a navigation bar. The z-index in css-slideshow is to keep it behind a responsive dropdown menu.Thanks for reading!
If you get rid of the position: absolute on the child and the height on the parent it appears to work. Is there a reason you made it position absolute?
http://jsfiddle.net/nupebzh4/4/
When you made the child position: absolute, it took it out of the dom flow. This made it so the parent did not know how tall the content was, which is why you had to hardcode a height. If you put the child back in the flow the parent container can auto size itself to contain the content as it changes size since you don't need to hardcode a height.
.parent {
width: 100%;
height: auto;
margin: 0 auto 0 auto;
background-color: #b5b5b5;
overflow: hidden;
position: relative;
}
.css-slideshow {
position: relative;
max-width: 1050px;
margin: 3.5em auto auto auto;
z-index: 1;
}
.css-slideshow div {
margin: 0;
max-width:100% !important;
/* responsive */
height:auto;
}
.css-slideshow img {
box-shadow: 0 0 2px #666;
max-width:100% !important;
/* responsive */
height:auto;
}
I changed a bit your css :
remove overflow:hidden
commented the height for .css-slideshow
remove the height:auto
http://jsfiddle.net/nupebzh4/5/
.parent {
width: 100%;
margin: 0 auto 0 auto;
background-color: #b5b5b5;
position: relative;
display:inline-block;
}
.css-slideshow {
position: relative;
max-width: 1050px;
/*height: 345px;*/
margin: 3.5em auto auto auto;
z-index: 1;
}
.css-slideshow div {
margin: 0;
position: absolute;
width:100%;
}
.css-slideshow img {
box-shadow: 0 0 2px #666;
width:100%;
}
I am currently centring an image horizontally and vertically using:
.centeredImage
{
text-align:center;
display:block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
html:
<body>
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>
</body>
This has been working fine however I have now added a header:
#header {
background: #e9e6e6; /* Here set your colour */
height: 55px;
width: 100%;
left: 0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
If I resize the window or the window isn't set at the perfect size this centered image will overlap the header. What I really want is it to be centered vertically between the bottom of the header and the bottom of the window. I tried adjusting top/bottom on the centered img but didn't have any luck. Could someone give me some pointers on how to go about this please?
I think you need something like following:
body{
padding:0;
margin:0;
}
.centeredImage
{
text-align:center;
display:block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto;
}
#header {
background: #e9e6e6; /* Here set your colour */
height: 55px;
width: 100%;
left: 0;
top:0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
<div id="header"></div>
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>
Check Fiddle. Hope it helps.
Just add div tag before and use some styles example
<body>
<div>
<p><img src="sample.png" alt="test"></p>
</div>
</body>
Style
div{display: inline-table;text-align: center}
div p{display: table-cell;vertical-align: middle;}
And use padding-top: {header height should be placed here}px
for example if header height is 50px;
div{padding-top: 50px}
I'm trying to make a sidebar and this is what I'm expecting:
Header fixed top and Footer fixed bottom ( I don't know if 'fixed' is the right term, but I want them not to overlap the sidebar container )
Scrollable sidebar-container
I tried to play with position of the div but it didn't work.
I also tried sticky footer's approach and It didn't work so well.
I tried googling my problem, but most answers are the whole layout of the website.
I need it working inside my sidebar.
Here's my: jsFiddle
The code is kinda long so I'm just gonna post the CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push, #footer {
height: 60px;
}
.container-fluid {
width: 100%;
height: 100%;
}
#content {
position: absolute;
width: 100%;
bottom: 60px;
top: 42px;
right: 0px;
left: 0px;
padding: 0px;
}
#sidebar {
position:absolute;
width:300px;
height:100%;
}
#sidebar .ul-menu {
margin:0px;
}
#sidenavbar .tabs-left>.nav-tabs>li>a{
margin: 0px;
min-width: 30px;
width: 70px;
-webkit-border-radius: 0px 0 0 0px;
-moz-border-radius: 0px 0 0 0px;
border-radius: 0px 0 0 0px;
border: 0px;
}
.sidebar-tab-content {
background: #FFF;
position: absolute;
height: 100%;
left: 94px;
width:100%;
}
#sidenavbar .tabs-left>.nav-tabs {
border: 0px;
}
#footer {
color: #FFF;
background-color: #666;
}
.side-header, .side-footer {
background: #AAF;
}
h2 {
margin: 0px;
}
Thanks for the ideas. I solve my problem just now by adding these css codes:
.side-header {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.side-container {
position: absolute;
bottom: 40px;
top: 40px;
overflow-y: auto;
}
.side-footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
Here's the JSFiddle: http://jsfiddle.net/geddemet/XCn7C/
This community is really helpful. Cheers!
I use this for my footer. it works for me, the header and footer stay in the same place and the footer will expand if the content with the scroll bar gets bigger. As for the box with the scroll bar, I believe you need to have something like overflow:hidden in the CSS for the box that you want to have a scroll bar on.
You can apply overflow: auto to your content div.
See this minimal example of how it would work.
Take a look at my sample
sample
It was not good when you set place the side bar and right content into position absolute. Your design should have to get you in trouble if right content is not predictable and make more custom on it.
.sidebar-tab-content {
background: #FFF;
width: 100%;
height: 500px; /*you could change it to 100% depend your need*/
}
Edited: Please look inside my jsfiddle sample code instead, the above proportion of CSS which I placed here was just small one of the changes
Your looking for position: fixed
FIDDLE Full screen Normal Fiddle
CSS:
.side-header{
background: #AAF;
position: fixed;
width: 100%;
}
.side-footer {
background: #AAF;
position:fixed;
bottom:60px;
width: 100%;
}
But you are going to have to play around with the width's because it's taking the container width div.
I was trying to create a page like this image. But I'm stuck with the sidebar. I tried to make it float left and right. But some tricky problems! Tried to make the sidebar absolute positioned. But when the content area is large, the sidebar background is not keeping up with content area.
Can anyone help me to create a basic structure of this?
This is what I have used!
aside{
width: 215px;
background: #f9f9f9;
padding:5px 0;
padding:5px;
position: absolute;
top: 128px;
bottom:0;
left: 0
}
.main .content{
background:#fff;
padding:5px;
margin-left: 195px;
height:100%;
}
You can do it with absolute positioning on the sidebar, and a margin on the content: http://jsbin.com/ucihul/1/edit
The key properties are:
On the parent element of both sidebar and content: position: relative
On the sidebar:
bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 215px; /* or whatever your fixed width is */
On the content div: margin-left: 215px (or whatever your fixed width is)
You can also have inner divs inside both the sidebar and content for additional control (they are in my demo, but I didn't do anything with them).
How about this:
HTML
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
CSS
#sidebar { float: left; width: 100px; background: red; }
#content { margin-left: 100px; background: blue; }
Fiddle: http://jsfiddle.net/j7dS5/1/
The easiest way to do this is graphically. Make an image that's as wide as the ".main" area and 1px tall that is colored appropriately for how wide you set your divs to be.
.main{
background:url(images/image.png) top center repeat-y;
}
aside{
width: 215px;
padding:5px 0;
padding:5px;
position: absolute;
top: 128px;
bottom:0;
left: 0
}
.main .content{
padding:5px;
margin-left: 195px;
}