Consider this simple markup:
<body>
<div style="border: 2px solid navy; position:absolute; width:100%; height:100%">
</div>
</body>
In the browsers I've tested (Firefox and Chrome) the right and the bottom parts of the border seem to lie outside the window area, since they are not visible. How should I fix my markup or stylesheet so that the div's border is completely visible while the div occupies the whole available area (i.e. its sizes are 100%/100% or equivalent)?
Because the border rests outside of the width of an element, if your body width is 100%, the border will be outside of that and thus not visible. Take a look at the box model:
alt text http://www.codeweblog.com/upload/b/basic-knowledge-of-css.png
To set a border for your page, just don't define the width and height:
body
{
border: 2px solid navy;
}
An alternative would be to do a faux border, setting the HTML background color to your border color, adding some padding, and then setting your body to the normal page background color:
html
{
background-color: navy;
padding: 2px;
}
body
{
background-color: #fff;
}
Or if you are wanting to accomplish this using a div:
<body>
<div class="containerDiv">
<div class="theDiv">
Content here.
</div>
</div>
</body>
...
div.containerDiv
{
background-color: navy;
padding: 2px;
}
div.theDiv
{
width: 100%;
height: 100%;
background-color: #fff;
}
Related
I am trying to make an experience bar with 2 <div> area. the longer <div> outside for the frame and the shorter inside for the current experience.
when I use {height: 100%} for inside <div> to fill up space, there is a gap between border and background-color when I change the display size of the browser to some certain %.
I tried it in chrome and edge browser and they have the same problem. I can fix the gap by changing {height: 101%}. I just wonder why there's a gap for 100% in some certain display sizes.
* {
box-sizing: border-box;
}
#bar-frame {
background-color: grey;
border: solid 13px black;
height: 70px;
width: 300px;
border-radius: 5px;
}
#bar {
background-color: black;
height: 100%;
width: 20%;
}
<body>
<div id="bar-frame">
<div id="bar"></div>
</div>
</body>
I expect there's no gap in the bar, but there's a gap show up in some certain display sizes.
CODEPEN link: https://codepen.io/ququ929/pen/zQWrZQ
English is my second language, hope you can understand the problem, thank you.
picture to show the problem
picture 2
what I expect for all display size.
Add border: 1px solid grey in you #bar CSS will resolve your issue. Thanks
#bar {
background-color: black;
border: 1px solid grey;
height: 100%; width: 20%;
}
i created a white div and gave it an opacity of 0.4 and then i gave it a black border. however because i made the div transparent, the border was also transparent. How can I make the border non transparent whilst keeping the div transparent?
CSS:
#box{
background-color:white;
opacity:0.4;
width:600px;
height:200px;
border-radius:15px;
border: 5px solid black;
}
You cannot make part of an element one opacity and another part of that same element another opacity.
Here is a silly example: https://jsfiddle.net/sheriffderek/85utzq4p/
Try using rgba() for background color instead - or wrap the element in something.
.box {
background: rgba(255, 0, 0, .5);
}
Add another div that contains the current div. Remove the border property and the width and height properties on the #box and add it the other containing div. Make sure the containing div has a class instead of an id. An example:
.entirebox {
width: 600px;
height: 200px;
border-radius: 15px;
border: 5px solid black;
}
#box {
background-color: white;
opacity: 0.4;
}
<div class="entirebox">
<div id="box">
<p>The stuff that you originally had here</p>
</div>
</div>
Here, I added the containing div and named it entirebox. Notice how the containing div has a class, while the div you started off with still has an id.
Hope this helped.
if you are looking for something that can work with solid color backgrounds and image backgrounds both you can create another parent and set it in this way:
body{
margin: 0px;
}
div.child {
display: block;
position: relative;
width: 200px;
height: 150px;
background: red;
opacity:0.3;
}
div.parent{
display: inline-block;
position:relative;
border: 4px solid black;
top: 0px;
left: 0px;
}
<div class="parent">
<div class="child">
</div>
</div>
Is there any solution how to avoid 1px "border" issue gap in Chrome and Firefox ? I have a grid by 4 columns each column is 25% inside is image that is fitting 100% width of parent div. When you changing a viewport and resizing browser sometimes you see on certain size 1px white gap. Probably it's because of wrong calculation percentage by browser. Did somebody solve this issue?
What you can do is put a wrapper around the elements inside of the div and set the width to 101% and then on the parent div (the original wrapper) you can set it to overflow: hidden like so:
HTML
<div class="big-poppa"> <!-- Original Wrapper -->
<div class="little-momma"> <!-- New Wrapper -->
<div class="this-little-piggie market"></div>
<div class="this-little-piggie home"></div>
<div class="this-little-piggie roast-beef"></div>
<div class="this-little-piggie none"></div>
</div>
</div>
CSS
.big-poppa { width: 100%; border: 1px solid black; overflow: hidden; }
.little-momma { width: 101%; }
.this-little-piggie { width: 25%; float: left; height: 40px; }
.market { background: #eee; }
.home { background: #999; }
.roast-beef { background: #666; }
.none { background: #333; }
Here is the fiddle: http://jsfiddle.net/YLJmE/
I want to dynamically adjust the width's of my child div's based on the heights of the other children div. It's hard to explain, so I'll just show some pictures...
In this first image, the black square is my "parent" div. It contains other divs with varying heights. The blue div's height is static, but must be floated to the right. The red div's are the ones I am having problems with. They should automatically adjust their own width if they occur below the bottom of the blue div.
The second red div with a small height. See how the last div fits the width of the parent div.
The second red div with a larger height. Now both the bottom 2 div's widths fit the parent div.
One more example...
I am not sure if I should be using special positioning, or how to structure the div's. It will be fine if there is a bit of space below the blue div, I just want to have an equal amount of space between the red div's.
Here is kinda what I have set up. See the yellow div's are hiding behind the right blue div: http://jsfiddle.net/MVzHS/1/
#floatRight {
width: 100px;
height:200px;
background-color:blue;
position: absolute;
right:10px;
top:10px;
}
Solution: http://jsfiddle.net/MVzHS/3/
You can do it by using float: right on the blue box and setting the overflow: hidden on the red boxes.
Check out this jsFiddle for an example.
If in the source you add the blue div first and float it right, this should do what you want/need it to do?
.black {
width:958px;
padding:10px;
border:1px solid #000;
float:left;
}
.blue {
width:248px;
height:400px;
border:1px solid #00f;
float:right;
margin:0 0 10px 30px;
}
.red {
border:1px solid #f00;
margin:0 0 10px;
}
http://jsfiddle.net/seemly/BTxgJ/
The only "issue" I found with the fiddle provided is that the divs themselves kind of intersect each other, but the content within them wrap as they should. I am unsure how this will display if using borders, background colours or background imagery. Does this help at all?
HTML
<div id="parent">
<div id="blue">Blue content here</div>
<div id="red">Red 1 content here
<br>more content
<br>more content
<br>more content
<br>more content
<br>more content</div>
<div id="red">Red 2 content</div>
<div id="red">Red 3 content</div>
</div>
CSS
#parent
{
border: 1px solid black;
height: 100%;
}
#blue
{
float: right;
border: 1px solid blue;
height: 100px;
margin-left: 10px;
}
#red
{
border: 1px solid red;
overflow: hidden;
margin-bottom: 10px;
}
JS Bin available here: http://jsbin.com/irubuy/5
I have div wrapper and the background is white, I also have a body background (its an image) I want to have a div inside my wrapper with no white background, basically I am looking to make that div transparent to the wrapper background.
<div style="background:none;">ghjhjghjghj</div>
Any suggestions?
Edit:
I'm trying to make the body background appear trough a div that is inside another div that have a white background. Is this possible?
Transparent background color works in this simple example...
http://jsfiddle.net/rD93B/1/
More HTML/CSS would help identify the problem you're having.
And updated jsfiddle with white background color on container div...
http://jsfiddle.net/rD93B/3/
Another update ....
http://jsfiddle.net/rD93B/6/
This shows the background color of the container div without showing the background image
CSS
div#outer {
background-color: green;
background-image: url(http://static4.grsites.com/archive/textures/red/red001.jpg);
width: 200px;
height: 200px;
z-index: 1;
}
div#inner {
background-color: inherit;
background-image: none;
width: 100px;
height: 100px;
border: solid 2px yellow;
color: yellow;
z-index: 0;
}
HTML
<div id="outer">
<div id="inner">
</div>
</div>
Use the background-color property and set it to: transparent on your inner div.
<div style="background-color: transparent;">ghjhjghjghj</div>