I have the following HTML:
<div class="selfClear" style="float: left; border: 1px solid black;">
...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>
I'd like there to be a 10px gap between the div and span, per the margin-top. But, since the div above is floated, it won't render that way. The fix to make sure something clear's the DIV. To do that via pure CSS, it appears one should use the '::after' method of inserting content that is then set to clear:
.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.selfClear {
display: inline-block;
}
However, this doesn't quite do what I think it should be doing. If I don't include the height/visibility styles so that I can actually see the period as it is inserted, I see that it's actually rendering inside the div (the black border encloses it), rather than after the div (so it's between the div and span). Am I misunderstanding how this should be working?
EDIT:
Here's a simpler example:
CSS:
#theDiv {
border: 1px solid green;
}
#theDiv::after {
content: ".";
}
#theOtherDiv {
border: 1px solid orange;
}
HTML:
<div id="theDiv">
Hello
</div>
<div id="theOtherDiv">
World
</div>
That ends up placing a period after 'Hello' rather than after the div.
It appears that ::after and ::before are actually appended to the CONTENTS of the element, not the element itself. Is that correct?
Yes, it appends to the content of the selected element. You could try wrapping the div then appending after the wrapper div, but that defeats the whole purpose of using :after in the first place.
You could also try setting the enclosing div to 'overflow: auto'. That works everywhere.
I would suggest using clearfix - it's a lot simpler, you just set up a surronding with a class of clearfix.
See this example.
Related
The inline element display perfectly if I remove the border or I change the display to block or inline-block. I don't understand why I can't see the border.
html:
<div class="content">test test test</div>
css:
body{
padding: 0;
margin: 0;
}
.content {
display: inline;
background: palegreen;
border: 5px solid red;
}
http://jsfiddle.net/Kodam/h1c3r5u3/
Let me quote this answer:
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
But if top border would be taken into account, it would make your div vertically misaligned with the other elements on the same line, even though in your case there is only a single element on the line. However, top border is ignored, therefore it is "sticking out" of the body and you cannot see it.
As a "proof", try to modify your HTML code in the provided fiddle as:
<div style="line-height: 50px"><div class="content">test test test</div></div>
Then you'll be able to see the top border, as the height of parent element has enough space for it not to stick out.
Why not use display: inline-block ?
.content {
display: inline-block;
background: palegreen;
border: 5px solid red;
}
I have some text I want to be positioned inside a holder as follows:
[...........]
[.the]......]
[.[title]...]
[...........]
The holder needs to have a black background and I'd like the text to have a white background and black text. I am using the following structure:
<div class="holder">
<div class="title">
<span>The</span>
<span>Title</span>
</div>
</div>
I am not sure if it's correct or not, but I am using the <span>s over <p>s becuase the p was going full width of the holder whereas the width of the span sizes itself to the text itself.
I want each span on a new line and this is where it is breaking atm. Currently the spans just sit on the same line together. I tried adding a <br> after the first span but that doesn't fix it either, this time the second span is slightly below but positioned to the right.
The css I am using:
.holder {
width: 200px;
height: 300px;
}
.title span {
background: #fff;
color: #000;
float: left;
display: block;
padding: 2px;
}
You shouldn't use float for that.
Moreover, span was created to span text in the middle of the line.
Is that what you were trying to do: http://jsfiddle.net/Rhjtv/ ?
Try adding clear:both; to the style declarations for your spans.
If this does not solve your problem, than please build an example on http://www.jsfiddle.net so wie can better understand what's the problem.
If you want your line siting one after another you should use divs
just try removing float:left; from
.title span {
background: #fff;
color: #000;
float: left;
display: block;
padding: 2px;
}
separate the lines by using the css word-break
click here view the result
http://gucoders.com/css3/css_wordbreak.php
I'm trying to underline a h1-title, but for some reason it always takes the whole length of the parent div. The only way I was able to do so, was by adding the position: absolute-property in the css...
This is the design:
And this is what I get:
Point is to get the blue line only as wide as the h1 and a gray border line under the parent div.
HTML:
<div class="title">
<h1>Contacteer ons</h1>
</div>
CSS:
h1 {
border-bottom: 8px solid #57c4d0;
position: absolute; /* As I've said, adding this allowed me to do so, but the result was far from ideal! */
}
.title {
border-bottom: 1px solid #dedede;
}
I'm planning on using the HTML across my whole website (each h1 will be different in length, adding a fixed width on each title isn't an option), so I'm looking for a robust solution. Anyone with advice?
You can change h1 to display: inline-block;
See a live example at (added margin-bottom to .title for clarity):
http://jsfiddle.net/P4BGC/
See this fiddle. H1 is a a block element, so it grows to fill its parent. You can set display: inline, but I also suggest to put it in its own div (or any other element with display: block) so you ensure that no content goes along side.
<div><h1>Hello, world</h1></div>
Lorem ipsum
the css
h1 {
border-bottom: 3px solid red;
display: inline;
}
You could also use CSS style text-decoration.
html:
<div><h1>Hello, world</h1></div>
css:
h1 {
text-decoration: underline;
}
I have a problem with simple Images in DIV containers in IE7.
I have it a few times on my homepage, here is an example:
<div id="divSearchBottomLinks" class="divSearchBottomLinks">
Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
<div id="divSearchButtomLinksEffect" class="divSearchButtomLinksEffect">
<img src="Images/Design/DefaultPage/searchButtonEffect.png" alt=""
style="border: 1px red solid;" />
</div>
</div>
CSS is:
.divSearchButtomLinksEffect
{
float:right;
padding-right:8px;
}
.divSearchBottomLinks
{
border: 1px solid red;
width: 99%;
height: 15px;
text-align: left;
font-size: 10px;
word-spacing: 8px;
color: Gray;
}
Here is how it looks like:
http://s3.imgimg.de/uploads/2204cc79eJPG.jpg
As you can see: No reason, why the image should be more in Bottom then the other, you see left FF4 (same in IE8/IE9/Opera9/Opera10) and right only IE7 who seems to have a problem with this.
I can't see how to fix it, I can only see from where it somes... any ideas?
For some reason the element floating to the right will float beneath the text on the line in IE7, The text takes up the full width of the container, just as a div elements does by default, and pushes the floating element down.
Put the text before the image in a div element also, and float that to the left, that way the element floating to the right will not be pushed down.
Browsers have different default CSS for various HTML elements. The first thing I would do is add a good reset so that all elements start out with the same basic settings. This will take some of the guess work out of the debugging process. Add this BEFORE the rest of your CSS -
http://meyerweb.com/eric/tools/css/reset/
Next, you should always specify the width in a floated container. IE in particular has issues if you don't specify widths properly.
I would try go with something like this instead:
<div id="bottomLinks">
<p>Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
</p>
<img src=".." />
</div>
<style>
div#bottomLinks {
overflow: hidden;
}
div#bottomLinks p {
float: left;
}
div#bottomLinks img {
float: right;
}
</style>
You're problem right now is probably because of the width of 99% and that the first element doesn't float.
I want to put padding on a css border. Pull it inside a div, away from the edge. Is this possible using css (css3 is fine, webkit).
Here is the design.
I did this by placing a div inside a div, then give a border to the inner div. I want to make the markup slim as posible so I want to use only one div if posible.
Thank you.
You should be able to do this with the CSS outline property:
<style>
.outer {
outline: 2px solid #CCC;
border: 1px solid #999;
background-color: #999;
}
</style>
<div class="outer">
example
</div>
Instead of borders, you may use outline property:
div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;
}
<div></div>
http://jsfiddle.net/H7KdA/
Padding around the border (which would separate it from the edge) is called the 'margin': for further details, see Box model.
Unfortunately, without adding another div, I don't think you can do this with just CSS.
The more complicated your design gets, the more likely you will need extraneous html tags.
Your other (also not great) option is an image background, or if it somehow makes you feel better, you can add elements client side with JQuery, thereby maintaining the "purity" of your server side files.
Best of luck.
You could do that by creating a inner div with the borders you want and a outer div with a display: table. Something like this:
<style>
.outer {
background: #ccc;
display: table;
width: 400px;
}
.inner {
border: 2px dashed #999;
height: 50px;
margin: 5px;
}
</style>
<div class="outer">
<div class="inner">
</div>
</div>
you can define a margin for the first child element based on the parent element selector. e.g.
.outer:first-child {
margin : 10px;
}
This way any element put inside the .outer will automatically have 10px margin.
If you want this to be applied to any direct child of the outer element use "> *" instead. e.g.
.outer > * {
margin : 10px;
}
No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.
Maybe if you post an example of what you're trying to do we can come up with alternate solutions?
-update-
Looking at your example I'm afraid it's still not possible, at least not with just one div. Im not a fan of divitis either, but the extra div probably is the best option in this case.