I have this div in my code:
<div id="advice" class="validation-advice" style="">some text here</div>
Now, can I use a selector or something to say that all divs with the class validation-advice should only have a width of lets say 100px?
I tried:
div.validation-advice{
width:100px;
}
Strange thing is, the div width changes (I used Firebug to see) but the text inside the div does not wrap when the div ends. Whats missing?
Thanks!
div.validation-advice{
width:100px;
}
The problem that your text not wraps at the end of the div is because you just enter plain text. If you do it like this you have no problems:
<div class="validation-advice">
<p>Your text here</p>
</div>
It's a piece of cake!
.validation-advice {
width: 100px;
}
probably your divs have display:inline, try this:
div.validation-advice{
display: block;
width:100px;
}
Related
I wrote simple CSS to align text using the w3schools example with:
text-align:center
When I add an underline in the same format, the underline works.
Here's the snippet:
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
Here's the w3schools page (the align text section):
https://www.w3schools.com/css/css_align.asp
In my full code I have the text I want to center inside another box. I've tried it both inside that box and outside any boxes. It doesn't center.
.CenterIt {
text-align:center;
display:block;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
The display property of span by default is inline. i.e.,
display:inline;
Therefore, <span> will take only the width of its content. In contrast, block elements like <div>, by default, take the full line (and thereby the full width of the page) for its content.
To make the text-align work for <span>, you need to change it into a block element.
Set
display: block;
for the span with .CenterIt class. This will make .CenterIt take the full line (and thereby the full width of the page), and then the text-align: center; will centralize the content.
Try this. You need to wrap it with a container unit of <div>
<div class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</div>
Following will work as well
<span class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</span>
It might work better if you run “display: flex;” on the container span and “justify-content: center;” on the child span. Flexbox is a little easier to use when placing items within a container.
Because your html, is in wrong format. You cant have a span child of a span.
try like this:
<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>
to have the span centered , without a parent div you would need to put the display, as block.
so you could have on your html and css like this:
span{display:block;}
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
html:
<span class="UnderlineIt CenterIt">Registration Form</span>
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
I've hit a snag in html and css.
I created a div and wanted to put a logo image on its left and a button link on its right but stubborn css insists on making it move on to separate lines ,I used float:left and float:right.
Would it be something like this? http://jsfiddle.net/QFEKN/
<div>
<img src="https://www.gravatar.com/avatar/c5b9fb1230ea2fe0dc96151cba3098d5?s=32&d=identicon&r=PG&f=1" style='float: left' />
<button>Link</button>
</div>
You mean something like this?
Put a div on your img and button and set width to 100%. Then float your image and your button. I updated the fiddle of thewheat: fiddle
Your CSS
#box
{
width:100%;
}
#logo
{
float:left;
width:50%;
/*padding and Margin according to your need*/
}
#buttons
{
float:right;
width:50%;
}
Your HTML
<div id ="box">
<div id ="logo">
/*your img file here */
</div>
<div id="buttons">
/* Your links/buutons */
</div>`enter code here`
One of the thing you can do here is that you create a table put your logo in first cell of the row and next cell you can add your link, after that you can set float/margin to the positioning you want..hope that helps
You have to use "float property". without it things will not work well in all browsers and then you will get browsers issues too.
Do this , This will work fine.
Check this fiddle
img
{
float:left;
width:100px;
}
button
{
float:right;
width:100px;
}
I have two float:left elements next to each other. When the parent element is too narrow to fit both texts on one line, then I want the text to go down to the next row, but each in their own "column". The parent width is flexible so I do not know what it will be.
http://jsfiddle.net/jsHCJ/1/ illustrates the problem and what I would like the solution to look like.
<div id = "page2">
<div class = "f1">
float 1
</div>
<div class = "f2">
float 2 and long
</div>
</div>
#page2 {width:110px; }
.f1{
background:pink;
float:left;
}
.f2{
background:yellow;
float:left;
}
Simple. Use display:table-cell; for both the divs.
What this will do is when the page shrinks or expands, the div will be at the same place and shall take the text to expand or shrink accordingly.
if i was you, i will use
display: table-cell
I've updated your fiddle
http://jsfiddle.net/jsHCJ/2/
You can change the css for #page 2 to like this
#page2 {
display: inline-block;
width: 150px;
}
try to add css in #page2
display: inline;
this will solve your problum
Trying to put a div id inside another div id, but having problems. The html is simple enough, a div inside a div with two closing divs beside each other, but I can't for the life of me get the css correct. I feel really silly asking such a newbie question, please help. I want the css to display the html with the outer container with a background color that shows around the outside of the inner container.
Can you give me an example of the css required for this? Thanks for your help, -Matthew
Here you have example on JSFiddle:
http://jsfiddle.net/JXUeF/1/
if your html looks like this (this is how i understood your description):
<div id="outer">
<div id="inner">
some content here
</div>
</div>
your css should look like this:
#outer{
background-color: red;
padding: 5px;
}
#inner{
background-color: blue;
}