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.
Related
I have a child element (h1 in my example) inside a parent div.
Why does the margin of the child appear to be outside of the parent.
The example below:
The child has a padding of 30px and a red border round it as expected.
The div has a yellow background but I expected it to be of height 100 + 30 + the h1 + 30 + 100.
div {
background-color: yellow;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
Interestingly if I put a border round the div as in the example below - it behaves as I expected. I know I can work round this, but I would like to know what is going on?
div {
background-color: yellow;
border: 5px solid green;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
It's "margin collapsing" which can seem confusing at first.
I recommend you read https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
This can be fixed by applying display: inline-block on the div or the h1. However, I highly recommend using padding on the div in this case, that should solve the problem permanently.
Empty blocks: If there is no border, padding, inline content, height,
or min-height to separate a block's margin-top from its margin-bottom,
then its top and bottom margins collapse. Ref
You can use the outline css property for consistent behavior.
div {
background-color: yellow;
outline: 5px solid green;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
When you set the border that means you are telling the DIV container it's boundary.
you have to assign the widths and floats.
float: left;
width: 100%;
Right now the DIV is starting from top. But showing background from the mid.
div {
background-color: yellow;
padding:100px;
}
h1 {
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
Or this
div {
background-color: yellow;
padding:1px;
}
h1 {
margin:100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
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>
I want to have a block on the left and a box which contains text to its right, but I don't want the text that wraps to drop under the block. It should stay with the confines of a rectangle that is adjacent the block. This is how a table would behave, but I'm not sure what the best way to accomplish this outside of one is.
I hope this fiddle will clarify: http://jsfiddle.net/bernk/Ck7cj/
<div class="container">
<div class="block">BLOCK</div>
<div class="text">This is a text box that wraps onto at least two lines</div>
</div>
Instead of floating you can use display:table-cell:
jsFiddle example
* {
box-sizing: border-box;
}
.container {
width: 200px;
border: 1px solid black;
overflow: auto;
}
.block {
display:table-cell;
width: 70px;
height: 20px;
background: red;
color: white;
text-align: center;
}
.text {
border: 1px solid red;
display:table-cell;
}
I have the following HTML structure
<div id='parent'>
<div id='child-1'>Some text goes here</div>
<div id='child-2'>Different text goes here</div>
<div class='clear'></div>
</div>
I also have the following CSS
#parent {
width: 800px;
position: relative;
}
#child-1 {
width: 500px;
float: left;
}
#child-2 {
width: 200px;
float: left;
}
.clear {
clear: both;
}
Now, the contents of the child DIVs (child-1 and child-2) could be anything, so eventually child-1 might have longer height than child-2, or child-2 might have a longer height than child-1.
What I want to do, is have a vertical line between child-1 and child-2, and this line has the length of the DIV that is of longer height. I tried border on both DIVs, (right border for child-1 and left border for child-2), but this is not a good idea, because the line will appear thick where the two DIVs touch each other and then thin for the extended part.
How can I do that? I also like to use CSS only if possible, no jQuery nor JavaScript. If you think extra DIVs are needed then this is OK though.
Thanks.
I tried border on both divs, (right border on child-1 and left border on div-2, but this is not a good idea, because the line will appear thick where the two divs touch each other and then thin for the extended part.
That's a good way to go, actually. The final step, though, is to give the right div a negative left margin of 1px (assuming the border is 1px wide), so that the two borders overlap.
#child-1 {
width: 500px;
float: left;
border-right: 1px solid gray;
}
#child-2 {
width: 200px;
float: left;
border-left: 1px solid gray;
margin-left: -1px;
}
Another option is to use display: table on the parent and then display: table-cell on the columns, and then have a single border line between them.
The simple one:
elements {
border-left: black solid 1px;
}
elements:nth-child(1) {
border-left: none;
}
try to use
border-left:1px solid #color;
margin-left:2px;
and
border-right:1px solid #color;
margin-right:2px;
You could also give border-right: 1px solid #000; only to your first div if this div is longer than second div and if second div is longer you could assign border-left: 1px solid #000; only to your second div.
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/