I am trying to place two divs on the same line (preferably centered) inside a wrapper div. The code I have written works great in FF and IE10. Almost every version of IE <10 doesn't like it. Can anybody help, thanks!
html:
<div id="home_wrapper">
<div id="links_location" class="shadow">content</div>
<div id="iframe_location" class="shadow">content</div>
</div>
css:
#home_wrapper {
width: 100%;
text-align: center;
border: 1px solid blue;
float:left;
}
#links_location, #iframe_location {
display: inline-block;
background-color:White;
!important
}
#links_location {
width:20%;
height:400px;
text-align:left;
border: 1px solid red;
}
#iframe_location {
height:400px;
width:70%;
border: 1px solid black;
}
jsfiddle JSFiddle
How about:
#links_location, #iframe_location
{
background-color:White;
float: left;
}
Is it what you wanted? Updated jsfiddle
*Update*
Everything works fine for me in all IE versions if you place !important after white, like this background-color: White !important;. You screw up your css by placing it after semicolon :)
Related
Even though I used float, my two div classes do not want to align side-by-side. How to do it?
Basically the entire width is 520px and each box is 250px in width with a margin between the boxes of 20px.
<div id="car-box">
<div class="well-car">
<div class="add_box">
<h1 class="add_heading">car model</h1>
</div>
</div>
<div class="car-brand">
<a class="button" href="www.placehold.it">car brand</a>
</div>
</div>
And CSS:
.car-box {
width:520px;
height:500px;
border:5px dashed blue;
margin-right:10px;
float:left
}
.well-car {
width:250px;
height:250px;
border:10px solid red;
}
.car-brand {
width: 250px;
height:250px;
border:10px dashed blue;
font-size: 20px;
float:left
}
Here Fiddle...Fiddle
Your border width gets added to the content widths. 250+2*10 + 250+2*10 == 540.
(You can read here https://developer.mozilla.org/en/docs/Web/CSS/box-sizing how do browsers calculate block elements' sizes)
For your custom styles it's usually best to set box-sizing: border-box(http://www.paulirish.com/2012/box-sizing-border-box-ftw/)
Edit: and yes, also float:left on the .well-car class, as others pointed out.
You need to float .well-car as well:
http://jsfiddle.net/b3kd9mwf/26/
You just need to add float: left; to your div with the class "well-car".
.well-car {
width:250px;
height:250px;
border:10px solid red;
float: left;
}
You are not floating your elements correctly. Class wellcar should be floated to the left and class car-brand should be floated to the right. The following code should work.
#car-box {
width:520px;
height:500px;
border:5px dashed blue;
margin-right:10px;
}
.well-car {
width:250px;
height:250px;
border:10px solid red;
float: left;
}
.car-brand {
width: 250px;
height:250px;
border:10px dashed blue;
font-size: 20px;
float:right;
}
I did a quick search on stackoverflow and found some ways to solve it but none works.
I have my HTML code like below:
<div id="product_box">
<div id="pro_img"><img src="images.jpg'" width="140px"/></div>
<div id="pro_text">
</div>
</div>
and my CSS:
<style>
#product_box {
border: 1px solid;
border-color: #8dd5f6;
margin-top: 8px;
margin-left: 4px;
margin-right: 4px;
width: 330px;
height: 196px;
float:left;
}
#pro_text{
float:left;
width:189px;
height: 196px;
background-color: #CCC;
}
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
width:140px;
height: 196px;
}
</style>
The #pro_img is to the left and #pro_text is to the right, it works fine at default zoom and large zoom in but the problem is that when I zoom out the pro_text (right div) falls off the container box.
I found someone says that I need box-sizing: border-box; inside of my CSS. I tried it and put it like this:
<style>
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
box-sizing: border-box;
width:140px;
height: 196px;
}
</style>
It won't fall off anymore but the border is invisible as it border the image from inside.
I disable the border-right from #pro_img, the problem's gone but I want a border-right that would separate the image and the text.
Total width needed: 140(img)+1(border)+189(text) = 330px just fit the container box. I tried increase box width to 332px but it won't help.
Thank you.
That is because you are using float:left I cleared that used margin instead see this http://jsfiddle.net/3pmmjLx8/
UPDATED CSS CODE
#pro_text{
margin-left:141px;
width:189px;
height: 196px;
background-color: #CCC;
}
I would like to know how can I make in CSS3 angled boxes. Like this site:
http://themeluxe.com/themes/glissando/ (the whites ones)
And how can I make the borders look better, smooth.
Looking on their code, I found this css:
.container:before, .container:after {
border-bottom: 80px solid transparent;
border-left: 110vw solid transparent;
content: "";
display: none;
height: 0;
margin-top: -80px;
position: relative;
width: 0;
}
But is not working for me.
In the website you link to they use the "border technique" to create the oblique boxes on pseudo elements you may understand this technique in this SO question.
Here is a simple fiddle using this technique to create the oblique bottom and top. It should help you understand how it works :
DEMO
HTML :
<div></div>
<div class="second"></div>
CSS :
body{
margin:0;
padding:0;
}
div{
height:200px;
background:teal;
position:relative;
}
.second{
background:gold;
}
.second:before{
content:'';
position:absolute;
bottom:100%;
border-left:100vw solid transparent;
border-bottom: 80px solid gold;
}
You should also be aware that in the website you link to, they are using vw units. They are not supported by IE8-
I'm having an interaction that I don't quite understand. I'm building a progress bar (seriously, can we have the entire standard implemented yet?) that displays info based off of data-* attributes, so I'm using :before and :after to display the labels.
I've got it in a fiddle: http://jsfiddle.net/WtrfL/
HTML:
<div class="wrap">
<div class="inner">
</div>
</div>
Styles:
.wrap {
width:500px;
height:2em;
border:1px solid black;
}
.wrap:before {
content:"1";
float:left;
border:1px solid black;
}
.wrap:after {
content:"2";
float:right;
border:1px solid black;
}
.inner {
width:30%;
height:100%;
background-color:#DDD;
border:1px solid #888;
}
Unfortunately, I'm having this happen:
I'd expect the [2] to be inside of the main bar, not underneath it.
I'm seeing the same behavior in IE9 and Chrome 27 on Windows, so I'm pretty sure this is me misunderstanding the way these things are supposed to work, not a bug in a rendering engine.
So... what's up? Any ideas? I'm good with a hack, this is just a prototype for the present.
I never use floats on pseudo elements. I would position them absolute. Something like this:
.wrap {
width:500px;
height:2em;
border:1px solid black;
position: relative;
}
.wrap:before {
content:"1";
position: absolute;
left: 0;
top: 0;
border:1px solid black;
}
.wrap:after {
content:"2";
position: absolute;
right: 0;
top: 0;
border:1px solid black;
}
I tested it in your fiddle and looks fine! http://jsfiddle.net/WtrfL/1/
What i have so far (some sort of example, not real):
html:
<html>
<body>
<div id="article">
<h1>TITLE</h1>
<p>text</p>
</div>
</body>
</html>
css
#article {
color:red;
border-bottom: 1px solid black;
}
THE PROBLEM!
I cannot divide the border at the bottom and the div itself
this may help you>>
http://dl.dropbox.com/u/22271794/div.PNG
SOLVED!!
HR TAG HELPED ME!!
Search Google for> HR TAG STYLING AND THAT'S IT (MARGIN ZERO, CHANGE COLOR)
just set a padding-bottom to the div itself, e.g.
#article {
color : red;
border-bottom : 1px solid black;
padding-bottom : 1.5em;
}
The border is placed at the bottom of the div. That's the point and there isn't anything you can do about that. If you want it to be visually separated from the content inside the div, you should add some padding at the bottom.
Are you looking for padding or margin?
With those you can style the placement of the div and its border.
#article {
color:red;
border-bottom: 1px solid black;
padding-bottom: 1px;
}
If this is not what you mean, what do you mean with dividing a border? This is not what you meant.
Edit: After seeing that image you added, i think you should find some other solution then pure css.
I would see an solution with a div that contains some element that hugs the bottom, and is white of color.
<div id="article">
<div></div>
</div>
#article {
color:red;
border-bottom: 1px solid black;
padding-bottom: 1px;
}
#article div {
// add some positioning.
margin-top: 99%;
height: 1%;
color: white;
}
This should give you some control over that whitespace you need.
Again, I don't think it is possible to do this on CSS alone.
If you're using an image then you can just do it like this:
img {
padding-bottom:10px;
border-bottom: 5px solid red;
}
See this jsfiddle
But if you're using a div with a background then you could do it using an extra div to produce the gap. Eg:
<div>
<div id="content"></div>
<div id="space"></div>
<div id="border"></div>
</div>
and CSS:
#content {
width:200px;
height:100px;
background:#000;
}
#space {
width:200px;
height:20px;
}
#border {
width:200px;
height:10px;
background:red;
}
See this jsfiddle
It can be done with CSS, but probably not the most cross-browser friendly way of doing things.
html
<div>Text Here</div>
css
div, div:after {
display:block;
background:#00f;
width:100px;
}
div:after {
content:" ";
border-top:1px solid #FFF;
border-bottom:3px solid #000;
}
Demo http://jsfiddle.net/2BQ8f/