So, I've built multiple sites and could always fix this problem, one way or another. But this time I got stuck.
I have a wrapper div, within this div I have two div's. When the inner div exceeds the length of the wrapper div, it just overlaps it. My goal is that the wrapper div gets the same height, as the inner div.
Here is the code I use:
<body>
<!-- Begin of site -->
<div id="wrapper">
<!-- Site Wrapper -->
<div id="site-wrapper">
<!-- Header -->
<div id="header"></div>
<!-- end Header -->
<!-- Column positioner -->
<div id="colpos">
<!-- Column Left -->
<div id="columnLeft">
<div id="mainWrap">
<div id="contentBar"></div>
<div id="main">
Content
<div id="longDiv">Very long</div>
</div>
</div>
</div>
<!-- Column Right -->
<div id="columnRight">
<div id="links">
<div id="navBar"></div>
Links
</div>
</div>
</div>
<!-- einde Column positioner -->
<div id="footer">Copyright</div>
</div>
<!-- end Site Wrapper -->
</div>
<!-- end site -->
</body>
And the corresponding CSS:
/*==============================
SITE RESETS
===============================*/
html {
margin: 0px;
padding: 0px;
font-family: Calibri, arial;
}
body{
margin: 0px;
padding: 0px 0px 50px 0px;
border: 0px;
background: url('img/background.png');
}
a img { border:none; }
#longDiv{
height: 2000px;
color: white;
background-color: black;
}
/*==============================
SITE WRAPPER
===============================*/
#wrapper{
width: 1200px;
margin: 0px;
padding: 0px;
border: 0px;
}
#site-wrapper{
width: 970px;
margin: 0px 0px 30px;
padding: 0px;
border: 0px;
position: relative;
background-color: #ebebeb;
left: 115px;
top: 30px;
}
#header{
clear: both;
min-width: 970px;
width: 100%;
height: 190px;
margin: 0px;
padding: 0px;
border: 0px;
background: #fff url('img/header.png');
background-repeat: repeat-x;
position: relative;
top: 30px;
}
#colpos{
clear: both;
float: left;
height: 100%;
min-height: 100px;
width: 920px;
padding: 50px 20px 20px 20px;
margin: 0px;
border: 0px;
}
#columnLeft
{
float: left;
width: 620px;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
border: 0px;
}
#columnRight
{
float: right;
width: 265px;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
border: 0px;
}
/*==============================
Content
===============================*/
#mainWrap{
float: left;
width: 100%;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
background: white;
border: 1px solid #689e9f;
}
#contentBar{
float: left;
min-width: 620px;
width: 100%;
min-height: 23px;
margin: 0px;
padding: 0px;
border: 0px;
background: #689e9f url('img/content.png');
background-repeat: no-repeat;
}
#main{
clear: both;
height: 100%;
min-height: inherit;
float: left;
margin: 5px 5px 5px 5px;
max-width: 620px;
height: inherit;
font-family: Calibri, arial;
}
#links{
float: left;
width: 100%;
min-height: 250px;
margin: 0px;
padding: 0px;
background: white;
border: 1px solid #689e9f;
}
#navBar{
float: left;
min-width: 265px;
width: 100%;
min-height: 23px;
margin: 0px;
padding: 0px;
border: 0px;
background: #689e9f url('img/nav.png') right;
background-repeat: no-repeat;
}
#footer
{
clear: both;
margin: 10px 10px 10px 10px;
width: 50%;
position: relative;
top: 0.5em;
left: 25%;
font-family: Calibri, arial;
color: white;
text-align: center;
font-style: italic;
background-color: #689e9f;
}
My problem in short:
http://i.stack.imgur.com/bBW8g.jpg
I've posted as much of my code as possible, I hope one of you can point me the error I've been making. I'm usually not someone asking online for help, but this problem has been bugging me long enough.
Thanks in advance,
EvilTuinhekjeNL
By defining a height of 100% for the wrapper, you are limiting it to the height of the browser window. The very long div will extend this limitation because of its set height.
To fix this remove the height 100% from the wrapper and any other containers, If you want to limit limit the content to the size of the viewable document, you could set your divs to position: absolute and then set the top, left, right and bottom to the extremities of the screen.
Related
I'm making some coding, where I'd like to hover over anywhere on an image to access a hover. but I don't want an entire block of coloured semi-transparent padding to cover the picture, only a thin solid-coloured strip.
To make this happen, I created a container for the div and put the smaller, solid-coloured div inside it. However, the background to the container (the image) isn't showing up. I assume this is because the div hasn't got any content other than the smaller div.
How can I fix this?
<center><div style="width: 500px; height: auto; background: #80c4ff; padding: 10px;">
<div class="dewisidebar">
<div style="background-image: url('http://placehold.it/80x350'); width: 80px; height: 350px;">
<div class="dewisidecontainer"><div class="dewisidelinks">
Three<br>Links<br>Here
</div></div></div></div>
<div class="dewitracker">
Information here
</div>
</div></center>
<style type="text/CSS">
.dewisidebar {
width: 80px;
height: 350px;
vertical-align: top;
background: #ff80c4;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
}
.dewisidecontainer {
width: 80px;
height: 350px;
padding: 130px 0px 0px 0px;
background: none;
opacity: 0.0;
}
.dewisidecontainer:hover {
opacity: 1.0;
}
.dewisidelinks {
width: 80px;
height: auto;
background: #ff80c4;
font-family: Arial;
font-size: 15px;
color: black;
line-height: 130%;
padding: 5px 0px;
}
.dewitracker {
width: 370px;
height: 350px;
vertical-align: top;
background: #c4ff80;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
}
</style>
Please help :)
Took out the extra div you created and added the background to the dewisidebar.
In the CSS I made the background-size 100% 100% meaning that the width and height will be full length of its div.
http://jsfiddle.net/davygxyz/5hxdznz0/
HTML
<center><div style="width: 500px; height: auto; background: #80c4ff; padding: 10px;">
<div class="dewisidebar">
<div class="dewisidecontainer"><div class="dewisidelinks">
Three<br>Links<br>Here
</div></div></div>
<div class="dewitracker">
Information here
</div>
</div></center>
CSS
.dewisidebar {
width: 80px;
height: 350px;
vertical-align: top;
background: #ff80c4;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
background-image: url('http://placehold.it/80x350');
background-repeat:no-repeat;
background-size:100% 100%;
}
.dewisidecontainer {
width: 80px;
height: 350px;
padding: 130px 0px 0px 0px;
background: none;
opacity: 0.0;
}
.dewisidecontainer:hover {
opacity: 1.0;
}
.dewisidelinks {
width: 80px;
height: auto;
background: #ff80c4;
font-family: Arial;
font-size: 15px;
color: black;
line-height: 130%;
padding: 5px 0px;
}
.dewitracker {
width: 370px;
height: 350px;
vertical-align: top;
background: #c4ff80;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
}
I currently have this HTML:
#circle {
background-color: orange;
max-width: 40px;
margin-right: 20px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float:left;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv{
float:left;
}
<div id="circle"><span id='innerContent'>123</span></div><div id='pointerDiv'>text goes here</div>
I'm trying to achieve this effect:
Basically, a line that goes from the border to point to an element I can fill with text that explains the number. How do I do this?
The below is one sample method to achieve this by using a pseudo-element and then positioning it absolutely as required.
The reason for the left: -58px is because the margin-right (I had modified it from the 20px in question to 50px in answer just for illustration) is 50px + the border of the box is a few px inside the circle and so that also had to be considered. The width of the line is made smaller than the left value so as to make the line end just before the pointerDiv.
Note that I have also added a clear: both to the #circle just in-case you want to add more such entries one below the other. If not required, it can be removed.
#circle {
background-color: orange;
max-width: 40px;
margin-right: 50px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float: left;
clear: both;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv {
float: left;
position: relative;
height: 40px;
line-height: 40px;
}
#pointerDiv:before {
content: '';
position: absolute;
border: 1px solid black;
top: 50%;
left: -58px;
width: 55px;
}
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>text goes here</div>
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>some lengthy text goes here</div>
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>short txt</div>
You can either use a CSS border or a SVG to draw a line (may not be compatible with some browser)
#circle {
background-color: orange;
max-width: 40px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float: left;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv {
float: left;
line-height: 40px;
}
#line-svg {
float: left;
margin-top: 20px;
margin-left: -6px;
width: 100px;
}
<div id="circle"><span id='innerContent'>123</span>
</div>
<svg id="line-svg">
<line x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(0,0,0);stroke-width:4" />
</svg>
<div id='pointerDiv'>text goes here</div>
You could always use pseudo elements? I've created a basic mockup below:
.circle {
height: 55px;
width: 55px;
border-radius: 50%;
background: orange;
position: relative;
display: inline-block;
}
.circle:before {
position: absolute;
content: "hi";
height: 60%;
top: 20%;
left: 20%;
width: 60%;
border: 2px solid black;
}
.circle:after {
position: absolute;
content: "";
width: 100%;
right: -85%;
top: 50%;
border-bottom: 1px solid black;
}
.tooltip {
display: inline-block;
margin-left: 55px;
height: 60px;
width:60px;
}
.wrapper{
display:block;
}
<div class="wrapper">
<div class="circle"></div>
<div class="tooltip">text goes here</div>
</div>
My current problem is that I have three div elements; one floated left, one floated right, and one between those two. I want the center div to automatically stretch to the max width of the width available between the two divs.
HTML
<div id="contain">
<div id="left">1</div>
<div id="filler"></div>
<div id="right">2</div>
</div>
CSS
#left {
text-decoration: none;
display: inline-block;
float: left;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#navFiller {
display: inline-block;
position: fixed;
float: left;
width: auto;
height: 45px;
background: #FF9000;
}
#right {
text-decoration: none;
display: inline-block;
float: right;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#contain {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
display: inline;
}
Jsfiddle of project:
http://jsfiddle.net/msEBU/
If you add your filler element after the floated elements, and then change up its styles a little bit (including giving the style-block the correct id), you can get what you're going for:
#left {
display: inline-block;
float: left;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#filler {
display: block;
float: none;
height: 45px;
background: #F00;
}
#right {
display: inline-block;
float: right;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#contain {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
display: inline;
}
<div id="contain">
<div id="left">1</div>
<div id="right">2</div>
<div id="filler">m</div>
</div>
OR, simulate a table:
#contain {
width: 100%;
padding: 0;
margin: 0;
display: table;
}
#left,
#right {
text-decoration: none;
display: table-cell;
width: 5%;
text-align: center;
background: #FF9000;
color: #FFFFFF;
padding: 2% 0;
}
#filler {
display: table-cell;
width: auto;
background: #F00;
}
<div id="contain">
<div id="left">1</div>
<div id="filler">m</div>
<div id="right">2</div>
</div>
Both methods have their benefits. It's up to you which is right for you.
Many implementations of CSS do not support automatic sizing relationships between different float layers. There are many solutions though. My recommendation is to use a small bit of javascript. I've used the following line of Jquery with some minor css tweaks:
$('#filler').outerWidth($('#contain').width()-$('#right').outerWidth()-$('#left').outerWidth());
Fiddle:
http://jsfiddle.net/K9C4u/2/
Also note that I moved the divs onto the same line because it makes a text node with a space for each of the return+tabs.
I have a page that is 1600px wide. The main area though is only 900px wide. I have a navigation that is suppose to be fixed in the center of the page ( which it is ). My problem is when I open the page, the page is fixed left instead of being centered when opened. What do I need to do to center everything within the 900px when a user visits the site?
The code isn't exact because it's detailed but it basically goes like this: http://jsfiddle.net/wznQk/
<body>
<div class="container">
<div class="header">
<div class="subheader">
<div class="navigation">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="logo"><img src="images/ogsystemslogo.png" /></li>
<li>CAREERS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="undernav">
<div class="short">
<img src="images/bluemark.png" />
<div class="top">TOP OGS NEWS:</div>
</div>
</div>
</div>
</div>
<div class="content">
</div>
</div>
</body>
CSS
.body {
width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
position: relative;
text-align: center;
}
.container {
width: 1600px;
height: 100%;
position: relative;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}
.header {
width: 1600px;
height: 150px;
margin: 0 10% 0 10%;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
.subheader {
width: 1600px;
height: 100px;
margin: 0 auto;
position: fixed;
background-color: white;
top: 0px;
}
.navigation {
font-family: 'Champagne & Limousines';
font-size: 20px;
text-align: left;
width: 1600px;
height: 100px;
padding: 0px;
margin-left: 0 auto;
border: 0px;
list-style: none;
text-decoration: none;
display: table-cell;
vertical-align: middle;
color: #006699;
background-color: white;
}
.navigation ul {
width: 590px;
height: 20px;
list-style: none;
text-decoration: none;
position: relative;
line-height: 55px;
margin: 0 auto;
background-color: white;
padding: 0px;
border: 0px;
}
.navigation ul li {
width: 70px;
height: 15px;
float: left;
padding-left: 35px;
background-color: white;
}
Please try to add this CSS instead of yours. In your CSS I found lot of unwanted CSS tags but I keep them as it is.
body {
width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
position: relative;
text-align: center;
}
.container {
width: 900px;
height: 100%;
position: relative;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}
.header {
width: 1600px;
height: 150px;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
.subheader {
width: 900px;
height: 100px;
position: fixed;
background-color: white;
top: 0px;
}
.navigation {
font-family: 'Champagne & Limousines';
font-size: 20px;
text-align: left;
width: 590px;
height: 100px;
padding: 0px;
margin: 0 auto;
border: 0px;
list-style: none;
text-decoration: none;
vertical-align: middle;
color: #006699;
background-color: white;
}
.navigation ul {
width: auto;
height: 20px;
list-style: none;
text-decoration: none;
position: relative;
line-height: 55px;
background-color: white;
padding: 0px;
border: 0px;
}
.navigation ul li {
width: 70px;
height: 15px;
float: left;
padding-left: 35px;
background-color: white;
}
Css:
.header {
width: 1600px;
height: 150px;
left: 50%;
margin-left: -800px;/*half of your total width*/
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
Added left: 50%; margin-left: -800px;/*half of your total width*/ to your .header class
Fiddle : http://jsfiddle.net/avinvarghese/wznQk/3/show/
I just created a lockscreen theme for my iPhone. It works, but for some reason I cannot remove the black background space of the body, i.e. resize the body along the right and bottom edge of the lockscreen.
I created a short slideshow so you get the.. indeed.
Here's the relevant HTML and complete CSS code. Note that I added many unnecessary '0px' properties just to see if they'd make a difference:
<body>
<div id="background">
<img src="LockBackground.jpg" width="320" height="480">
</div>
<div id="labels">
<div id="clock">//e.g. 6:12 AM
</div>
<div id="day">//e.g. Sunday
</div>
<div id="date">//e.g. 5 Aug
</div>
</div>
</body>
CSS:
*{ margin: 0px; padding: 0px; border: 0px; }
body { background-color: #000; border: 0px; margin: 0px; padding: 0px; position: absolute; font-family: Helvetica Neue; font-size: 50px; color: #fff; width: 320px; }
img { border: 0px; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 320px; z-index: 0; }
#labels { position: absolute; width: 290px; top: 50%; margin: -0.7em 0 0 30px; }
#day { line-height: 0.8; }
#date { position: absolute; margin-top: 18px; line-height: 0.6; }
Surely you just need body {width:100%; height:100%;}.
It may be more complex than this, but I can't think why it would be.
You could also try img {width:100%; height:100%;}.