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.
Related
I want to align the bottom of my mat icon and that of the img next to it. I've tried multiple things, and this is what it currently looks like:
Here's my HTML:
<div class="container">
<p class="triage"><mat-icon>assignment_ind</mat-icon></p>
<p class="O2"><img src="../../assets/med_O2.png"></p>
</div>
CSS:
.O2, .triage{
display: inline-block;
vertical-align: middle;
}
.container img {
width: 50px;
height: 50px;
}
.container mat-icon{
font-size: 60px;
width: 60px;
}
Use line-height:
.container
{
line-height: 60px; //or what ever height your container is
}
Can you push mat-icon down with a little bit of margin or padding?
.container mat-icon{
font-size: 60px;
width: 60px;
margin-top: 5px;
}
What about something like this?
<style>
.container {
position: relative;
width: 65px;
height: 100px;
}
p.triage {
background: blue;
width: 30px;
height: 40px;
position: absolute;
bottom: 0;
right: 0;
}
p.O2 {
width: 30px;
height: 20px;
background: red;
position: absolute;
bottom: 0;
left: 0;
}
</style>
<div class="container">
<p class="triage"></p>
<p class="O2"></p>
</div>
I am currently working on a webpage featuring some jQuery-UI sliders, but I am having trouble properly aligning all of the things.
HTML:
<div class="row">
<div id="hue"><img src="download.png" class="hue" /></div>
<div id="mixedColor"></div>
</div>
<div class="rowVert">
<div class="vert" id="CSVhue"></div>
<div class="vert" id="CSVsat"></div>
<div class="vert" id="CSVbright"></div>
</div>
CSS:
#hue {
display: block;
width: 90%;
float: left;
margin: 0 auto;
margin-top: 37px;
}
.hue {
height: 12px;
width: 100%;
}
#mixedColor {
display: block;
width: 100px;
height: 100px;
border: 1px solid black;
float: right;
}
.vert {
margin-top: 100px;
}
But without any success.
Here is a JSFiddle: http://jsfiddle.net/npL866zz/1/
How I want it:
Please note my webpage is optimized for IE7, so all commands must be optimized for this one browser.
Here is something you could work with
Fiddle demo
#hue {
margin-top: 50px;
margin-right: 110px;
overflow: hidden;
}
.hue {
height: 17px;
width: 100%;
}
#mixedColor {
position: absolute;
right: 10px;
top: 10px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.rowVert {
padding-top: 40px;
padding-right: 110px;
padding-left: 20%;
}
.vert {
float: left;
margin-left: 14%;
width: 15px;
height: 100px;
}
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'm stuck with a Div layout. there's two major Divs which include children Divs; Container and bottom. The Container (Green Div) doesn't stretch to the end of its children. Here's a screenshot:
I tried clear: both and position in different cases but didn't work.
Also need that horizontal gray Div stick to the bottom of its parents.
This is the code (although It looks different in JSFiddle from my FF/Chrome Browser): http://jsfiddle.net/7KB9z/
This is the result wanna achieve:
Code from the fiddle
This is the html
<div id="container">
<div id="middle">
<div class="right"></div>
<div class="center"></div>
<div class="left"></div>
<div style="clear: both;"></div>
</div>
<div id="bottom">
<div id="first">
<div class="right"></div>
<div class="center"></div>
<div class="left"></div>
</div>
<div id="second">
<div class="module"></div>
<div class="banner"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
This is the css
div#container {
width: 1000px;
height: 100%;
margin: 45px auto;
background: green;
}
div#middle {
width: 100%;
height: 560px;
margin-top: 20px;
}
div#middle .right {
float: right;
width: 205px;
height: 100%;
background: yellow;
}
div#middle .center {
float: right;
width: 455px;
height: 100%;
margin: 0 10px;
background: orange;
}
div#middle .left {
float: left;
width: 320px;
height: 100%;
background: blue;
}
/*Bottom section*/
div#bottom {
width: 100%;
height: 100%;
margin-top: 20px;
background: brown;
}
div#bottom #first {
float: right;
width: 100%;
height: 400px;
background: red;
}
div#bottom #first .right {
float: right;
width: 325px;
height: 100%;
background: pink;
}
div#bottom #first .center {
float: right;
width: 325px;
height: 100%;
margin: 0 12px;
background: pink;
}
div#bottom #first .left {
float: left;
width: 325px;
height: 100%;
background: pink;
}
div#bottom #second {
float: right;
width: 100%;
height: 100%;
background: black;
margin-top: 10px;
}
div#bottom #second .module {
float: right;
width: 325px;
height: 100%;
background: silver;
}
div#bottom #second .banner {
float: left;
width: 645px;
min-height: 100px;
vertical-align: bottom;
background: silver;
}
Thank you
Give position: relative to #second
and give position:absolute; bottom: 0 to #second.banner
code
div#container {
width: 1000px;
min-height: 100%;
margin: 45px auto;
background: green;
}
div#middle {
width: 100%;
height: 560px;
margin-top: 20px;
}
div#middle .right {
float: right;
width: 205px;
height: 100%;
background: yellow;
}
div#middle .center {
float: right;
width: 455px;
height: 100%;
margin: 0 10px;
background: orange;
}
div#middle .left {
float: left;
width: 320px;
height: 100%;
background: blue;
}
div#bottom {
width: 100%;
height: 100%;
margin-top: 20px;
background: brown;
}
div#bottom #first {
float: right;
width: 100%;
height: 400px;
background: red;
}
div#bottom #first .right {
float: right;
width: 325px;
height: 100%;
background: pink;
}
div#bottom #first .center {
float: right;
width: 325px;
height: 100%;
margin: 0 12px;
background: pink;
}
div#bottom #first .left {
float: left;
width: 325px;
height: 100%;
background: pink;
}
div#bottom #second {
float: right;
width: 100%;
height: 100%;
background: black;
margin-top: 10px;
position:relative;
}
div#bottom #second .module {
float: right;
width: 325px;
height: 300px;
background: silver;
}
div#bottom #second .banner {
float: left;
width: 645px;
min-height: 100px;
vertical-align: bottom;
background: silver;
position:absolute;
bottom:0;
}
Js fiddle working example jsfiddle
edit regarding a comment question: The height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space.
Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the children, letting it push past the 100% only when it needs too. So use min-height:100%;
More info: detailed explanation
So I have a header which is set to 100% width on my page and I want to put text on the banner and stay in place but when I zoom in and out the position of the text changes. How do I make it so that the text stays place to the place I set it and zooming in and out does not affect it?
Fiddle : jsfiddle.net/5ASJv/
html
<div id="wrap">
<div class="right">
Hey <br />
What is up <br />
</div></div>
css
* {
margin: 0 auto;
}
#wrap {
height: 150px;
width: 100%;
background: url(http://froggyadventures.com/wp-content/uploads/galleries/post-93/full/placeholder%20-%20Copy%20(2).gif) no-repeat center;
text-align: center;
background-color: #FFF;
}
.right{
width: 400px;
height: 110px;
position: relative;
z-index: 999;
top: 100px;
left: 100px;
}
Try this:
* {
margin: 0 auto;
}
#wrap {
height: 150px;
width: 100%;
background: url(http://froggyadventures.com/wp-content/uploads/galleries/post-93/full/placeholder%20-%20Copy%20(2).gif) no-repeat center;
text-align: center;
background-color: #FFF;
position: relative;
}
.right{
width: 400px;
height: 110px;
position: absolute;
z-index: 999;
top: 100px;
left: 100px;
}