This question already has answers here:
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 5 years ago.
Can anyone help me to bordered cover the image?
It only follow the text.
If my text is longer, then the border is resize with the text
Here my is html code
<div id = "guitar">
<img src="christmas.jpg" alt="guitar" width="500" height="300" class="imgleft"> </img>
<h1>Guitar</h1>
Visit the three ghosts of Christmas this November as the PLAYHOUSE Whitley Bay kicks off the festive season with a fantastic Disney-esque musical production of A Christmas Carol.
</div>
Here is my css
#guitar { border : 5px solid;
padding : 10px;
margin-bottom : 2%;
}
.imgleft{float:left;}
You need to clear floated image. The simples way to do it is by applying overflow rule to container:
#guitar {
border : 5px solid;
padding : 10px;
margin-bottom : 2%;
overflow: auto; /* <--- this rule does the trick */
}
Instead of using overflow property, try clearing the float of the :after of #guitar because overflow sometimes adds excess space in your box.
#guitar:before, #guitar:after {
content: '';
display: table;
}
#guitar:after {
clear: both;
}
Related
This question already has answers here:
How can I replace text with CSS?
(25 answers)
Closed last year.
div
{ border: none !important; width: 400px; margin: auto; background-color: #eee !important; text-indent: -9999px;}
div::before{content: 'test';color: black;}
The ::before and ::after attribute don't change the main tag's content, but rather they add content before or after it.
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a canvas and I want to place some text to its right. This is my HTML code:
<div id="GL">
<canvas id="GL-Surface" width="800px" height="600px">
Canvases are not supported in your browser
</canvas>
</div>
<div id="side_box">
Sample text
</div>
And this is my CSS code:
#GL {
padding-bottom: 20px;
padding-top: 5px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
}
#side_box {
padding-bottom: 20px;
padding-top: 5px;
}
But for some reason, the sample text is placed under the canvas and if I inspect the site in chrome, I see, that there still is a margin. This is a screenshot from chrome:
The sample text on the bottom is supposed to be on the right.
Why does it still exist? I have set it to 0px.
div elements are block elements. This means, they will always force the next element to go under it.
We can fix this with the css property: display: inline; or display: inline-block;
There is also other ways to accomplish this, like with flexbox or css grid
You can read more about flexbox and css grid here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
https://developer.mozilla.org/en-US/docs/Web/CSS/grid
In the snippet I'm using the inline css property, and I've given the canvas a border for illustrative purpose.
#GL {
display: inline-block;
border: 1px solid black;
}
#GL-Surface {
height: 200px;
width: 200px;
}
#side_box {
display: inline;
}
<div id="GL">
<canvas id="GL-Surface" width="200px" height="200px">
Canvases are not supported in your browser
</canvas>
</div>
<div id="side_box">
Sample text
</div>
By default div is block elements, changing it to inline-block fixes the issue-
div {
display: inline-block;
}
This question already has answers here:
HTML Div border not showing
(3 answers)
Closed 2 years ago.
I am trying to make a foot print for a cool look, but it won't show
here's my code:
.footprint {
width: 100px;
height: 50px;
border-color: gray;
border: 3px;
border-radius: 20px;
}
<div class="footprint"></div>
welcome to SO!
Somebody already found a solution to your problem here:
CSS Property Border-Color Not Working
A div by default has no border-style and no border-width, therefore the border will not be shown.
This question already has answers here:
Floating elements within a div, floats outside of div. Why?
(11 answers)
Closed 7 years ago.
I'm working on maintaining a bit of code that's out of whack at the moment. Basically, we have a <div> tag with it's own style settings, and we have multiple logic tags that will display different <span> tags, which will hold different bits of data.
What I'm seeing is that when I'm using a <span> tag with a style setting float: left; this is causing the <div> tag's color box to not wrap around the <span>.
Here's a sample of the code:
<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
<span style="padding: 3px 1 1 1; float:left;">
TestData: Float Left
</span>
</div>
I need this span tag to go left, due to requirements. Was wondering what my options are for this to work?
Original jsFiddle
Add overflow:auto to the parent div:
#testData {
overflow:auto;
}
jsFiddle example
Other way is to make use of clear: both
#testData:after {
clear: both;
display: block;
content: "";
}
Fiddle
Other solutions:
Using overflow: hidden
#testData {
overflow: hidden;
}
Or making a dummy element <div class="clearBoth"></div>
HTML
<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
<span style="padding: 3px 1 1 1; float:left;">
TestData: Float Left
</span>
<div class="clearBoth"></div>
</div>
CSS
.clearBoth {
clear: both;
}
http://jsfiddle.net/gLfw5wc7/3/
#testData {
padding:4px;
width: 100%;
border: 1px solid #999;
background: #d1d1d1;
text-align:right;
}
#testData:after {
content:"";
clear: both;
display: table;
}
#testData > span {
padding: 3px 1px 1px;
float:left;
}
This is known as a clearfix. When floating an element, it gets out "the flow" of the document. This also means that its width and height aren't taken into account by the parent. That's why #testData seems to collapse: it thinks it doesn't have content. To fix this there are some options. The easiest is to use overflow, however, that's bad practice imo. In this particular case it works, but in some other cases you won't be able to use it because content that overflows the parent will either be hidden (overflow: hidden) or a scrollbar will appear (overflow: auto).
The most common and proper solution is to use a pseudo element to fix this. :after is such a pseudo element (see this question for :after vs ::after). Basically, a pseudo element can create an element in CSS that is not visible in HTML.
Every time you use float, you'll be needing a clearfix. Therefore it's useful to create a .clear class which you can apply to every element that needs to clear floats. It would look like this.
HTML
<div id="testData" class="clear">
<span>
TestData: Float Left
</span>
</div>
CSS
.clear:after {
content:"";
clear: both;
display: table;
}
Now you can add class="clear" to every element that needs to be cleared. If you are into SASS, you might find this answer helpful but considering you are new to HTML, I'd suggest sticking to HTML and CSS first.
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 7 years ago.
HTML
<span class="symbol">$</span>
<span class="value">400</span>
This displays both "$" and "400" at the same level.
The moment I add
CSS
.symbol {
font-size: 2em;
}
then, "400" is pushed down.
Question: Why is "400/.value" affected by changes to "$/.symbol" ?
Thanks.
http://codepen.io/anon/pen/emLLrm
This question realistically is about vertically aligning, and can be solved using
vertical-align:middle
or
vertical-align:top;
to override the default baseline (which by default is set to the bottom).
Demo:
.symbol {
font-size: 2em;
vertical-align:middle;
}
<span class="symbol">$</span>
<span class="value">400</span>
In addition if you want more control over the positioning in relation to the number, use position:relative and top: on the symbol to position where you'd like. For instance:
.symbol {
font-size: 2em;
position:relative;
top: .3em; /* or 10px if you want to use pixels */
}