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/
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;
}
HTML:
<div id="tabs">
ertgertget
</div>
<div id="design">
EHELLOW RODL
</div>
CSS:
#design{
border: solid 10px black;
}
#tabs {
border: 1px solid red;
float: left;
}
http://jsfiddle.net/2NLK8/
Why does the second div not completely appear to the right of the floated div?
#design{
border: solid 10px black;
overflow:auto;
}
#tabs {
border: 1px solid red;
float: left;
}
Example
Try:
#design {
border: solid 10px black;
display:inline;
}
#tabs {
border: 1px solid red;
display:inline;
}
DEMO
Because the floated element, take as much space as it content, while a default block element will take an entire row. If you want your second div to be aligned to the right, float it right
I would get yourself familiar with "clearfix".
Check it out here: Force Element To Self-Clear its Children
It will "clear" floats in these types of cases. It's a very commonly used method in the industry.
I have a link and an inline div next to it (to the right). I want the div to occupy the rest of the space to the right. Is there a way to do that?
what<div style="display:inline-block;width:200px;border:1px solid red">hello</div>
If you can wrap a span around the div, like:
what<span><div>hello</div></span>
jsFiddle example
You can apply this CSS to get what you're after:
a {
background: #ccc;
float: left
}
span {
display: block;
overflow: hidden;
padding: 0 4px 0 6px
}
div {
width: 100%;
display:inline-block;
border:1px solid red
}
You could wrap everything within a div and give it table and table cell to children:
http://jsfiddle.net/T4Qcd/
.inner{
border:1px solid red;
display:table-cell;
width:100%;
}
a{
display:table-cell;
}
.wrapper{
display:table;
}
You can do so by applying width to both anchor tag as well as the div.
a{
width:10%;
}
div{
width:90%;
}
Your html would be.
what
<div style="display:inline-block;border:1px solid red">hello</div>
Consider this:
<div id="parent">
This is some text
<div id="child">
<ul><li>test</li></ul>
This some other text
</div>
</div>
CSS:
#parent{line-height: 55px}
#child{line-height: 20px}
ul{ margin:0; padding:0; list-style:none}
Problem: Ths links in div "child" not getting line-height:20px. It's getting line-height:55px from the main "parent" div. I tried putting !important, but does not work.
But when I put line-height to the li, then it works.
Who said it's not getting the line-height: 22px;? The line-height of the parent element pushes #child down.
Demo
Demo (When child Inherits the parents line-height)
If you are wishing the child element to stick the parents text, than I think you are not using the right property, you should use padding-top instead.
#parent {
padding-top: 30px;
border: 1px solid #f00;
}
#child {
border: 1px solid #000;
}
Demo
After you edited your question, it still works as expected, I don't know what makes you think it doesn't work. In the below example, I've deliberately added more line-height for demo purpose.
Demo (After you edited your question)
#parent {
line-height: 55px;
border: 1px solid #000;
}
#child {
line-height: 100px;
border: 1px solid #0f0;
}
ul {
margin:0;
padding:0;
list-style:none;
}
ul li {
border: 1px solid #f00;
}
If this is all what you got in your document, than you are wrong, it it still doesn't work in any case, than specificity might be an issue for you which I cannot bet on, as I don't have sufficient resources from your side.
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 :)