I have a conundrum: I need the darkest-gray bar you see on the bottom right (after opening the below code locally) spanning across as much space as the browser window will allow WITHOUT crossing over the light-gray section I have set up on the left. Here is my code:
<div class="timeline-section">
<div class="timeline-wrapper">
<div class="mini-timline"></div>
<div class="timeline"></div>
<div class="clearfix"></div>
</div>
</div>
CSS:
.clearfix { clear: both; }
.timeline-wrapper { position: relative; }
.timeline-section {
background: #3d3d3d;
bottom: 0px;
height: 276px;
left: 0px;
width: 100%;
position: absolute;
padding: 0px;}
.mini-timline {
background: #474747;
margin: 0px;
float: left;
height: 276px;
width: 500px;
display: inline-block;}
.timeline {
background: #232323;
height: 200px;
width: 60%;
float: left;
display: inline-block;
position: relative;}
One method is not to float the timeline element.
Just set a margin-left for the width of the mini-timeline:
.timeline {
background: #232323;
height: 200px;
margin-left:500px;
position: relative;
color:#FFF;
}
http://jsfiddle.net/rLzAM/1/
Try this:
.timeline {
background: #232323;
height: 200px;
width: 100%;
display: inline-block;
position: absolute;
}
Related
I have a layout frame of small widget with top navbar and bottom navbar. Inside that widget i have items and in one of them i have to put another layout(same as parent). This is small example of mine css problem, where footer in child layout is not in the bottom.
.body{
position: static;
width: 100%;
height: 100%;
}
.header{
position: absolute;
top: 0px;
}
.footer{
position: absolute;
bottom: 0px;
}
.main{
position: relative;
width: 100%;
height: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.item{
position: relative;
width: 100%;
}
.view{
height: 100%;
}
this dont get the height of height in parent widget, how can i fix that?
I manage to build the layout i want without any kind of positions, i removed all of them. I use:
display: table;
display: table-row;
for mine layout and it works perfectly. Here is the example of what i did. Below is general css of what i did.
.body{
height: 100%;
display: table;
width: 100%;
text-align: center;
}
.header{
display: table-row;
width: 100%;
height: 50px;
background-color: blue;
}
.footer{
display: table-row;
bottom: 0px;
width: 100%;
height: 50px;
background-color: grey;
}
.main{
display: table;
width: 100%;
height: 100%;
}
.item{
display: table-row;
width: 100%;
}
.fullExtend{
height: 100%;
}
html, body { height: 100%; }
Class body is container for widget, header and footer is for header and footer for each widget, main is the body of widget, item is part of main which can be widget and fullExtend is item which height get maximum space left in page.
Do you want to achieve something like this?
Edit: I refined your structure a bit. You want to achieve this?
HTML :
<div class="main-header">
Main Header
</div>
<div class="wrapper">
<div class="item item-1">
<div class="header">
Item 1 Header
</div>
<div class="item-content">
<div class="item item-2">
Item 2
</div>
</div>
<div class="footer">
Item 1 Footer
</div>
</div>
</div>
<div class="main-footer">
Main Footer
</div>
CSS:
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
height: 100%;
}
.main-header{
position: absolute;
top: 0px;
background-color: blue;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
}
.main-footer{
position: absolute;
bottom: 0px;
background-color: grey;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
}
.wrapper{
position: relative;
padding: 50px 0;
box-sizing: border-box;
height: 100%;
}
.header{
position: absolute;
top: 0px;
width: 100%;
height: 50px;
background-color: darkblue;
color: white;
}
.footer{
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background-color: darkgrey;
color: white;
}
.item{
position: relative;
width: 100%;
height: 100%;
}
.item-view{
height: 100%;
position: absolute;
width: 100%;
padding-top: 50px;
box-sizing: border-box;
}
.item-content{
position: relative;
top: 50px;
}
I have a situation where the 'bar' div, display some information about the 'foo' element, when the 'foo' element is hovered. But the scroll bar conflict with that, and hide the rest of my div. Can I get it to display the full 'bar' div somehow?
HTML
<div class="box">
<div class="foo">
xxx
<div class="bar">Info text, info text</div>
</div>
</div>
CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
position: relative;
}
.bar {
float: left;
height: 20px;
width: 125px;
background: orange;
position: relative;
top: -10px;
right: -30px;
display: none;
}
.foo:hover > .bar {
display: block;
}
You could set the .bar div to position:fixed
JSfiddle Demo
CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
}
.bar {
height: 20px;
width: 125px;
background: orange;
position: fixed;
display: none;
}
.foo:hover > .bar {
display: block;
}
My problem is that I wanted to have split page by two divs side by side (50% width). Inside of them I wanted to place another divs and make them aligned vertically and horizontally at the same time.
I think that it is possible to make it without JS, but I'm not able to do that.
Can anybody make my two circles placed in the center (V,H) of their parent DIV, which are 50% of width and 100% of height so that when I will resize my window the circles will always be in center (and side by side as is now)?
Here is my code:
<div id="container">
<div class="left">
<div class="kolo1">
sometext1
</div>
</div>
<div class="right">
<div class="kolo2">
sometext 2
</div>
</div>
</div>
And a JSFiddle for that: http://jsfiddle.net/m5LCx/
Thanks in advance in solving my quest :)
It's actually quite simple, all you need to do is to simulate a table-like behaviour:
HTML markup:
<div id="container">
<div>
<div class="half left">
<div class="circle">hello</div>
</div>
<div class="half right">
<div class="circle">world</div>
</div>
</div>
</div>
CSS styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
}
#container > div {
display: table-row;
}
.half {
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
.half.left {
background: red;
}
.half.right {
background: blue;
}
.circle {
display: inline-block;
padding: 50px;
border-radius: 50%;
}
.half.left .circle {
background: blue;
}
.half.right .circle {
background: red;
}
Final result http://jsfiddle.net/m5LCx/11/:
Working here http://jsfiddle.net/3KmbV/
add position: relative in .left and .right class and than add margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; in .kolo1 and .kolo2 class. and remove top position from .left class
try it
body {
background-color: #006666;
margin: 0 auto;
height: 100%;
width: 100%;
font-size: 62.5%;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
}
.left {
width: 50%;
min-height: 100%;
float: left;
top: 0;
background-color: #660066;
position: relative;
}
.right {
width: 50%;
min-height: 100%;
float: right;
min-height: 100%;
background-color: #003366;
position: relative;
}
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
you can give postion: relative to .left and .right.
and give below CSS for to .kolo1 and .kolo2
margin: -5em 0 0 -5em;
position: absolute;
left: 50%;
top: 50%;
Updated demo
Another fiddle. This one uses absolute positioning with negative margins to ensure the circles are always in the centre. CSS looks like this
.kolo1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em; /* this must be half of the width */
margin-top: -5em; /* this must be half of the height */
}
As #Tushar points out, you need to set the position of the parent element to relative also.
Working Fiddle
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
Try adding padding-top:50% for parent divs (having class left and right)
I have a DIV who's borders are made up of images. What I'm trying to do is have this DIV auto expand (in height only) whenever the content does not fit the content area. Otherwise it should just use the min-height. Here is my markup:
XHTML:
<div id="alerts">
<div id="alerts-top"></div>
<div id="alerts-left"></div>
<div id="alerts-content">
<div id="alerts-header">
<p>Alerts</p>
</div>
<div id="alerts-main">
<!-- content in here -->
</div>
</div>
<div id="alerts-right"></div>
<div id="alerts-bottom"></div>
</div>
CSS:
#alerts { float: left; width: 267px; height: 200px; }
#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; }
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; }
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; }
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; }
#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }
This isn't working for me - there is a gap between the bottom border and the left and right borders. The content area is #alerts-main.
Try this for #alerts-bottom:
#alerts #alerts-bottom {
float: left;
background: url(../images/alerts-bottom.png) no-repeat;
height: 11px;
width: 258px;
margin-top: -9px;
}
With a negative value for margin-top property you control how the div will be displayed (in this case you'll force the #alerts-bottom div to be rendered 9px above the default display).
Hope it helps.
After a "five minutes" consideration I've wrote this code and it will do what you want. Just change the styles to add the images as backgrounds. First the CSS:
#wrapper { position: relative; width: 500px; min-height: 350px; }
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; }
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; }
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; }
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; }
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; }
#content { text-align: justify; padding: 65px 20px 20px 20px; }
And the HTML:
<div id="wrapper">
<div id="top-margin">
<div id="alerts">Alerts alerts alerts</div>
</div>
<div id="right-margin"></div>
<div id="bottom-margin"></div>
<div id="left-margin"></div>
<div id="content">Lorem ipsum dolor sit amet etc...</div>
</div>
The #wrapper's height will expand as more text is added. Sorry that I've changed the names of the Ids and justified the text. But that can easily be remedied.
This is my current HTML structure. The footer div is sitting alone in the BODY.
<div id="footer">
<div class="container">
<div id="footer-bg">
<div class="footer1">
<p class="p1">asd</p>
<p class="p2">asd</p>
</div>
<div class="footer2">
<p class="p1">asd</p>
<p class="p2">asd</p>
<p class="p3">asd</p>
</div>
<div class="footer3">
<p class="p1">asd</p>
</div>
</div>
</div>
</div>
Here's the CSS for it:
#footer
{
position: relative;
background: url('../footer-bg-repeat.jpg') repeat-x;
height: 307px;
}
#footer #footer-bg
{
background: url('../footer.jpg') no-repeat top left;
height: 528px;
width: 1587px;
position: absolute;
left: -380px;
top: -221px;
}
#footer .footer1
{
position: absolute;
top: 137px;
}
#footer .footer1 .p1
{
position: absolute;
left: 500px;
background: #dcdcdc;
height: 23px;
width: 80px;
text-align: center;
line-height: 25px;
font-weight: bold;
}
#footer .footer1 .p2
{
position: absolute;
left: 1000px;
top: -20px;
background: url() no-repeat top right;
height: 40px;
width: 249px;
text-indent: -9999px;
z-index: 6;
}
#footer .footer2
{
position: absolute;
top: 159px;
height: 23px;
width: 100%;
background: #000;
}
#footer .footer2 p
{
display: inline;
line-height: 25px;
color: #636466;
height: 23px;
}
#footer .footer2 .p1
{
position: absolute;
left: 500px;
background: url() no-repeat center right;
width: 175px;
}
#footer .footer2 .p2
{
position: absolute;
left: 700px;
background: #dcdcdc url() no-repeat 60px 8px;
width: 75px;
padding-left: 15px;
}
#footer .footer2 .p3
{
position: absolute;
left: 800px;
}
#footer .footer3
{
position: absolute;
top: 190px;
}
#footer .footer3 .p1
{
position: absolute;
left: 500px;
width: 1000px;
}
I'm trying to get .footer2 and .footer3 to extend the width of the container allowing me to have a background colour set for what ever width the screen may be.
Setting 100% width just gets it to the size of the container - As I'd expect. How can I, though, get it to the width of the page?
Try setting both left and right property to 0;
you didn't define question well.
if you want to set it in middle set margins
margin:0 10px;
width:%your pages width%;
if you mean something else download Firebug plugin for Firefox and inspect a page's footer that did what you want to do and take a look at structure and css rules. it always works