I'm using a container with a fixed width. Inside the container I have 2 divs floating left, the first div has a width of 9% and the second div has a width of 91% but for some reason there is a 1px white line that shows up on the very right. How do I fix this issue? It sometimes varies when zooming on the browser.
HTML:
<div id="main-container">
<div id="container1">
</div>
<div id="container2">
</div>
</div>
CSS:
#main-container {
margin: 0 auto;
margin-top: 45px;
width: 1110px;
height: 650px;
border: 3px solid red;
padding: 0px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px; }
/*content*/
#container1 {
float: left;
width: 9%;
height: 100%;
border-radius: 7px 0px 0px 7px;
-moz-border-radius: 7px 0px 0px 7px;
-webkit-border-radius: 7px 0px 0px 7px;
background: yellow; }
#container2 {
float: left;
width: 91%;
height: 100%;
border-radius: 0 7px 7px 0;
-moz-border-radius: 0 7px 7px 0;
-webkit-border-radius: 0 7px 7px 0;
background: orange; }
demo
As the some others mentions it looks like the problem is caused by rounding differences in WebKit.
Your can add float: right; to the second container to fix the alignment and remove the gap. http://jsfiddle.net/Gw5AH/3/
Related
I want to apply a border radius to a box-shadow but not the div itself, so the end result will be a rounded box shadow on the left side with 90 degree angle div.
.div-to-style {
-webkit-box-shadow: -20px 0px 0px 0px blue;
-moz-box-shadow: -20px 0px 0px 0px blue;
box-shadow: -20px 0px 0px 0px blue;
border-radius: 8px 8px 8px 8px;
background-color: red;
width: 200px;
height: 50px;
margin-left:40px;
}
<div class="div-to-style">
</div>
<p>
Want the red section to have a straight border on the left
</p>
https://jsfiddle.net/alair016/vdcohttk/
The problem with this CSS is that the border-radius is applied to the box-shadow as well as the div on the left side.
The box shadow is not an element. You can't add border-radius to an effect.
Try a pseudo-element instead:
.div-to-style {
border-radius: 0 8px 8px 0;
background-color: red;
width: 200px;
height: 50px;
margin-left: 40px;
position: relative;
}
.div-to-style::before {
content: '';
position: absolute;
left: -20px;
width: 20px;
height: 100%;
background: blue;
z-index: -1;
border-radius: 8px 0 0 8px;
}
<div class="div-to-style">
</div>
Bonus Option: No pseudo-element - Gradient background
.div-to-style {
border-radius: 8px;
background: linear-gradient(to right, blue, blue 20px, red 20px);
width: 200px;
padding-left: 20px;
height: 50px;
margin-left: 40px;
position: relative;
}
<div class="div-to-style">
</div>
You can use a pseudo-element to create the shadow, and apply the border-radius to that pseudo-element.
Working Example:
.div-to-style {
background-color: red;
width: 200px;
height: 50px;
margin-left:40px;
}
.div-to-style:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: relative;
z-index: -1;
-webkit-box-shadow: -20px 0px 0px 0px blue;
-moz-box-shadow: -20px 0px 0px 0px blue;
box-shadow: -20px 0px 0px 0px blue;
border-radius: 8px 8px 8px 8px;
}
<div class="div-to-style">
</div>
<p>
Want the red section to have a straight border on the left
</p>
The gist is, you need 2 divs. Add the box shadow and radius to the outer div, and the other background or border styles to the inner div.
.div-to-style {
-webkit-box-shadow: -20px 0px 0px 0px blue;
-moz-box-shadow: -20px 0px 0px 0px blue;
box-shadow: -20px 0px 0px 0px blue;
border-radius: 8px 8px 8px 8px;
margin-left: 40px;
}
.inner-style {
background-color: red;
width: 200px;
height: 50px;
}
<div class="div-to-style">
<div class="inner-style">
</div>
</div>
<p>
Want the red section to have a straight border on the left
</p>
Here is a code example:
https://jsfiddle.net/vdcohttk/2/
== Edit
If you're going to downvote, please write a comment explaining why. Thanks!
All
this is my first stack overflow post, thanks in advance for any help
I am putting together a page with content and divs with image background, when I try to float two divs on the right one on top of each other, having trouble flow content to the left, I have used clear so one div is on top of the other one on the right, but the content I am trying to put on the left is align with the second image where the clear was applied then there is a big gap for the first div, any suggestions?
I have enclosed code here
.img1 {
float: right;
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
padding: 70px 5px 10px 5px;
}
.img2 {
float: right;
background: url("url")no-repeat 100% 100%;
margin-top: -20px;
margin-bottom: 10px;
margin-left: 30px;
background-color: #006534;
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
padding: 5px 5px 0px 5px;
}
HTML
<div class="img1">content</div>
<p class="clear"></p>
<div class="img2">content</div>
<div>Content.........</div>
Try this, I believe it's what you asked for:
HTML:
<div style="float: left;">
<div>Content.........</div>
</div>
<div style="float: right;">
<div class="img1">content</div>
<br>
<div class="img2">content</div>
</div>
CSS:
.img1 {
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
}
.img2 {
background: url("url")no-repeat 100% 100%;
background-color: #006534;
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
}
JsFiddle: https://jsfiddle.net/nmzwLn2q/1/
I have this HTML and this CSS markup, and I have this image: http://i.imgur.com/cJWhXCh.png
For some reason, the image doesn't load at all, even though if I open the url in a new tab, it loads properly. When I change the image to anything else in the same folder, it works.
I feel like I'm missing something incredibly elementary here.
div#advert_bubble{
width: 400px;
min-height: 300px;
position: relative;
float: left;
clear: left;
}
div#advert_bubble div.advert_bubble_box{
float: left;
clear: left;
width: 300px;
height: 200px;
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border: 1px solid #000000;
-webkit-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
background-color: white;
position: absolute;
z-index: 5;
}
div.advert_bubble_arrow{
position: absolute;
width: 41px;
height: 39px;
background: url(/images/advert_bubble_arrow.png) no-repeat 0 0;
z-index: 10;
}
<div id="advert_bubble">
<div class="advert_bubble_box">
<p> Text Here </p>
</div>
<div class="advert_bubble_arrow"> </div>
</div>
You need to declare the ID its not showing up because the id is not defined. to define it do this
<html>
<Head>
<title></title>
<!--This is where you declare your IDs-->
<script type="text/javascript">
//looks for Id's here so declare them
function Idgoeshere()
//looks for the id.
{
document.getElementById
//after the Id you say what it does.
}
</script>
</head>
<body>
div id="advert_bubble">
<div class="advert_bubble_box">
<p> Text Here </p>
</div>
<div class="advert_bubble_arrow"> </div>
</div>
div#advert_bubble{
width: 400px;
min-height: 300px;
position: relative;
float: left;
clear: left;
}
div#advert_bubble div.advert_bubble_box{
float: left;
clear: left;
width: 300px;
height: 200px;
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border: 1px solid #000000;
-webkit-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
background-color: white;
position: absolute;
z-index: 5;
}
div.advert_bubble_arrow{
position: absolute;
width: 41px;
height: 39px;
background: url(/images/advert_bubble_arrow.png) no-repeat 0 0;
z-index: 10;
}
</body>
</html>
Please take a look at my site http://kaniamea.com/2/ I am trying to get the contentarea appear correctly behind the three Attractions boxes. My css is:
#attractions {
width: 290px;
height: auto;
display: block;
padding-right: 20px;
float: left;
}
and this is the code of my main container:
#main {
margin: 10px auto 0px;
width: 950px;
max-width:100%;
background: none repeat scroll 0% 0% #FBFBFB;
padding: 10px;
background-color: #FFF;
border: 2px solid #FFF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}
When I remove float: left; from #attractions and replace it it with display: inline-block; it works but I need to figure out another solution with float: left; so this will float correctly on mobile. Is there another way to make the contentarea styles appear behind the boxes?
Right now I can either auto-size the container div to the inner div or I can center the whole thing... but I can't figure out how to do both at the same time.
Below is the CSS/Layout as I have it. Right now both the page and main elements are centered but if the content is beyond a certain size it goes over the borders without either element re-sizing.
LAYOUT
</head>
<body>
#using Monet.Common
<div id="contentContainer">
<div class="page">
#Html.Partial("NavBarPartial")
<section id="main">
<div id="content">
#RenderBody()
</div>
<div id="footer">
<span style="color: Gray;"> </span>
</div>
</section>
</div>
</div>
</body>
</html>
CSS
#contentContainer {
width: 100%;
}
.page
{
width: 50%; /*1030px;/*75em;/*83.7em;*/
margin-left: auto;
margin-right: auto;
}
#content {
padding: 20px;
}
#main
{
width:auto;
display:block;
height: auto;
background-color: white;
/*border: 1px solid #999;*/
border-radius: 5px 10px / 10px;
-webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
-moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}
footer,
#footer
{
/*background-image: url('Images/TEST2body_bot.png');*/
background-color: #fff;
background-repeat: no-repeat;
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0 0 30px 0;
font-size: .9em;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
EDIT
The problem I'm having is best illustrated w/two examples. In one instance I have a table that is 1030px wide. This table is left-justified perfectly but the right edge of the table flows well beyond the right border of the main element.
Another problem is with a set of radio buttons. When the page loads there is supposed to be nothing but white space to the right of the buttons. A specific menu appears to the right of the radio buttons based on the user's selection. When the page loads it looks like there's just enough space for the menus, however they are loading UNDERNEATH the radio buttons instead of to their right.
SECOND EDIT
This is the CSS that allows me to auto-size the div, however everything is left justified (commented out certain sections and added display: inline-block and overflow: auto to .page).
/*#contentContainer { Had to comment this whole section out
width: 100%;
}*/
.page
{
/*width: 50%; /*1030px;/*75em;/*83.7em; Needed to comment this attribute as well*/
display: inline-block;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
#main
{
height: auto;
display:block;
height: auto;
background-color: white;
/*border: 1px solid #999;*/
border-radius: 5px 10px / 10px;
-webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
-moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}
You need to set the parent element to
display: table-cell;
vertical-align: middle;
text-align: center;
#and some kind of height:
height: 350px;
The #page-div to:
display: inline-block;
Like this:
http://jsfiddle.net/YA2Ns/1/
Don't ask me why, but changing adding display:table and margin: 0 auto to the .page element worked. I actually no longer need the contentContainer div anymore. Here's the final product.
CSS
.page
{
display: inline-block;
overflow: auto;
display: table;
margin: 0 auto;
}
#main
{
height: auto;
display:block;
height: auto;
background-color: white;
/*border: 1px solid #999;*/
border-radius: 5px 10px / 10px;
-webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
-moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}
#content {
padding: 20px;
}
footer,
#footer
{
/*background-image: url('Images/TEST2body_bot.png');*/
/*background-color: #fff; */
background-repeat: no-repeat;
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0 0 30px 0;
font-size: .9em;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
LAYOUT
<body>
#using Monet.Common
<div class="page">
#Html.Partial("NavBarPartial")
<section id="main">
<div id="content">
#RenderBody()
</div>
</section>
</div>
<div id="footer">
<span style="color: Gray;"></span>
</div>
</body>