So, here's my situation:
I have a div (see the code below), a pretty simple . When running the code, I come up with a gray box. BUT, my intention was for that gray box to span from the start of the browser window to the END of that browser window, while what the code below does is creating a gray box with what seems to be a white border.
<div style="height: 30px; background-color: gray; color: white;">
Hey
</div>
I'm sorry for the lack of explanation, but I found no good way to word what I was trying to do. Thanks in advance,
Tom.
If you want a div to fill all available space use the following:
width: 100%;
height: 100%;
You can define sizes in percentages of available space.
If you want to keep you height:
<div style="height: 30px; width: 100%; background-color: gray; color: white;">
Hey
</div>
Also to get rid of white borders, add this: body { padding: 0; margin: 0 }
If I understand your correctly, you need width to be set to 100%
<div style="width: 100%; height: 30px; background-color: gray; color: white;">
Hey
</div>
Add width:100%; to say to the div to fill all the horizontal space.
<head>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="height: 30px; width: 100% background-color: gray; color: white;">
Hey
</div>
</body>
I am assuming you want your div to be 30px high and the width all the way. To do that you just set the width of the div to 100% and make sure the body has no padding(this can shift your elements to the the right a little. I recommend using reset.css)
Hope this helps!
Related
So I'm found an article on responsive design (here) and I tried to make something like what it had on part of the tutorial. The site said to divid the size of the element by the size of the container that the element(s) are in. (the reason I divided by 1000 and not 1050 is because the margins on the div#main make it 1000px even though the header is 1050px) If that doesn't make sense than the link can explain it. It looks fine with my browser at full size, but if I shrink the window to much then it doesn't resize the way it should. I'm not exactly sure what part of my code is wrong but if someone could help me that would be great! Here's a link to the page I made. And here is my source code:
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
height: 100%;
width: 100%;
}
header {
height: 100px;
max-width: 1050px;
margin: 0 auto;
}
#main {
border-radius: 25px;
background-color: #aaa;
height: inherit;
max-width: inherit;
margin: 25px;
}
.box {
width: 47.5%;
height: 75%;
margin: 1.25%;
background-color: #444;
border-radius: 15px;
float: left;
}
</style>
</head>
<body>
<header>
<div id="main">
<span class="box">
</span>
<span class="box">
</span>
</div>
</header>
</body>
</html>
Maybe if I explain what's happening you'll see that there actually is no problem.
The inner boxes have a fixed height based on 75% of the parent container's height. Therefore, the heights of all elements stay the same. However, your margins are fractions of the parent element's width, therefore they change with the page width. As the page gets smaller, the margin gets smaller. Since a div naturally lies as high on the page as it can, it moves toward the border of its parent.
All this is expected with your design. To fix it, set fixed top and bottom margins:
.box {margin: 12px 1.25%;}
How do I create a div that has a fixed height and stays on the bottom of the page, and another one above it occupying the remaining vertical space?
Something like this should achieve what you're looking for.
Try like this
See Demo
Use height: inherit for your first div which takes the remaining height available
html
<div id='container'>
<div id='first'>
First Div content
</div>
<div id='second'>
Second div content
</div>
</div>
Css
#container{
width: 600px;
height: 450px;
border: 1px solid black;
}
#second{
position: relative;
bottom: 100px;
height: 100px;
background-color: green;
}
#first{
height: inherit;
background-color: red;
}
I don't think any of the other examples really work nicely when the page is resized.
This type of thing is best accomplished with a few lines of javascript, as its not something that CSS does a great job of generally speaking.
See here for a working demo. mod.it requires that you view the demo in chrome but the code in the demo is cross browser and will work anywhere.
https://mod.it/6hQaRsEL
I'm building a responsive page that has an image and <div> side by side:
The width and height of the image retain their proportions and expand/contract with the browser window.
The width of the <div> does the same, but I'd like it to match the image in terms of height.
Is there any way of achieving this? Here's a Fiddle of the problem: http://jsfiddle.net/alecrust/xwJHw/
You can use display:table property for this. Write like this:
section{
display:table;
width:100%;
}
.text-box,.image{
display:table-cell;
vertical-align:top;
}
Check this http://jsfiddle.net/xwJHw/8/
Note: display:table works till IE8 & above.
You can use jQuery.
Calculate the hight of the image using $('#imgId').height() and the set the same to Div.
Also see the code, how heights are adjusted here http://filamentgroup.com/examples/equalHeights/
EDITED:
#alecrust: This is a fine solution and also implemented in your fiddle, See Here
A pure css solution: SEE DEMO
CSS:
#wrapper {
overflow: hidden;
background: #ccc;
}
.placeholder_image {
float: left;
width: 430px;
height: 264px;
background: #fff;
padding: 0 20px 0 0;
}
.placeholder_text {
background: #ccc;
margin-left: 450px;
display: block;
}
HTML:
<div id="wrapper">
<div class="placeholder_image">
<img src="http://www.qesign.com/templates/designs/christmas-after-effects-animated-e-card-template-31966.jpg" alt="" />
</div>
<div class="placeholder_text">
A block of text
</div>
</div>
Does anyone know how to yellow highlight a field in table and also have the yellow color print? This hightlights on the screen, but does not print the yellow:
<td style="background-color: yellow">Total:</td>
I found out that browsers, by design, do not print background colors. The only workaround I was able to find is that you can make a ultra-thick border of the cell or div:
<td style="border-left: 999px solid yellow">
Unfortunately, the cell contents won't overlay over the thick yellow border. I checked everywhere online and the closest answer I could find was on stack overflow:
Best Ways to Get Around CSS Backgrounds Not Printing
However, the answer was untested and I was unable to get it working on my computer. I tried toying around and experimenting with no luck.
Ok, I found a solution to my problem, but the solution is rather inelegant. Like I said in my above question, you have create a div tag with a big color border on it. The thing is is that colored borders can print correctly. Then, where the highlighted color is displayed, lay another div tag with the text on top. Inelegant, but it works.
It's best to set both the text div and the highlight div's within a third "outer" div for easy placement. the inner divs should be position "absolute" and the outer div should have position "relative". Sample code is below. This is tested code on both Chrome and Firefox:
<style type="text/css">
#outer_box {
position: relative;
border: 2px solid black;
width: 500px;
height:300px;
}
#yellow_highlight {
position: absolute;
width: 0px;
height: 30px;
border-left: 300px;
border-color: yellow;
border-style: solid;
top: 0;
left: 0px
}
#message_text {
position: absolute;
top: 0;
left: 0px;
}
</style>
<body>
<div id="outer_box">
<div id="yellow_highlight"> </div>
<div id="message_text">hello, world!</div>
</div>
</body>
I have a problem which I do not understand.
If I use percentage in width, I would expect that elements calculate borders, margins or paddings within their size (in percentage).
But in fact those values are added to their size which I asume is wrong.
Is my expectation wrong?
The bellow example shows the issue. The both "divs" "left" and "right" I expect to be in a single line. If I remove "border" it works as expected.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
}
.left {
border: 1px solid black;
width: 20%;
float: left;
}
.right {
border: 1px solid black;
width: 80%;
float: left;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
What you can do to fix this issue is to use box-sizing. See http://jsfiddle.net/Marwelln/YYkxK/
box-sizing:border-box
That's totally normal. It's not what you might expect at first, but CSS works that way.
Even without percentages:
#width {
width: 100px;
padding: 0 20px;
}
This #width div will occupy 140px. Works the same for percentages.
So you might need inner divs to achieve what you want.
<div class="left">
<div class="inner">
</div>
</div>
<div class="right">
<div class="inner">
</div>
</div>
.inner { padding: 10px; }
.right .inner { border-left: 1px solid #ccc; }
Padding or Border always adds to an elements size, inside out.
Margin never adds to size but adds space outside the element.
Percentages or set values don't matter. The above is always true.
Reviewing the box model may help ---> HERE
When you use percentage as width (or height) values, these are the percentage of the width (or height) of the parent block element (containing block).
In super modern browsers you can use calc() to fix this: calc(80% - 2px). And yes, it is normal. If you set the width to 100px and border to 150px what would happen then if border wasnt added?