I'm using foundation as a basic template for my Website. Now i have a span-element inside many divs.
The parent element is a div with width: 100%, what i need, but the span has text now, with a background color.
So i just want the span-width adjusting by the text, and not by the
parent element. How to do this?
width: initial or auto is not working.
EDIT:
CSS looks like:
span.error, small.error {
background: #B86566;
margin: 0px 10px 10px 10px;
padding: 0.375rem 0.375rem 0.375rem;
text-align: left;
}
HTML:
<span ng-if="method_here" class="error">
<span class="arrow_up"></span>
{{validation_message}}
</span>
All of this is inside an div which has a width: 100%.
Set the span to display: inline-block;.
Related
I have an image (img tag) and a div, whose display property is set to flex.
div and img are placed in a row. They are floated.
I want to apply margin-left to the div but it does not work, unless I set the display property of the div to inline-block.
I've explored StackoverFlow, the nearest post to my case is this one. But that so post does not make me understand what's going on.
As it can be seen in the image below, the margin of div on the left, overlaps with the image. Why? why isn't it pushing the div to right?:
Here is my code:
html
<div id="traffic">
<p>Traffic</p>
<img id="chart" src="https://www.syncfusion.com/products/flutter/control/images/chart/chart-types/flutter-multiple-axis-charts.png" alt="" srcset="">
<div id="traffic-infos"></div>
</div>
css
#traffic {
background-color: rgb(255, 255, 255);
padding: 15px 15px 15px 15px;
overflow: auto; /* so the container resized its height */
}
#traffic-infos {
display: flex;
flex-direction: column;
margin-left: 40px;
height: 300px;
background-color: black;
}
#chart{
width: 100%;
max-width: 850px;
min-width: 600px;
height: auto;
float: left;
}
the same code in JsFiddle: https://jsfiddle.net/shahryarslg/xmo5uahv/8/
The whole problem is solved if I change the display of traffic-infos class to inline-block. But I want to understand how display is related to this problem? what's going on?
Thanks in advance.
You need to set the margin on the floated element:
#chart {
margin-right: 40px;
}
I am having trouble getting the two html tags in my div to be on the same line and align center () and right (). I thought setting display: inline-block; and float: right would align my span to the right side of the div, but it looks like my span is appearing outside of the div tag in the current setup. Is there something that I'm doing wrong in my current setup.
HTML:
<div class="record-card__date">
<p>09/01/2017</p>
<span class="glyphicon glyphicon-circle-arrow-up record-card__glyphicon"></span>
</div>
CSS:
.record-card__date {
text-align: center;
background-color: #014421;
color: #FFF;
padding: 0 15px 0 15px;
margin: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.record-card__glyphicon {
display: inline-block;
float: right;
margin: 2px 0 0 0;
}
You are using a block level <p> element which will occupy 100% of the space. Then trying to force an inline element in the same line. It would be far better just to insert your icon into the paragraph at the end and accomplish the same thing by floating your icon to the right.
<p>09/01/2017
<span class="glyphicon glyphicon-circle-arrow-up record-card__glyphicon"></span>
</p>
The p element is a block element, so it automatically creates a line break. All you need to do is have both the p element and span elements be set to "inline-block". You do not need to use "float" at all. Using float:right; takes the element out of flow, which is why it's not showing inside the div.
.record-card__glyphicon {
display: inline-block;
margin: 2px 0 0 0;
}
.record-card__date p {
display:inline-block;
}
I am trying to get an Input and a Link element to sit side by side inside a Div element.
I wanted to have the Div and the Link to completely fill the Div element so you cannot see the containing Div around the edges of the Input and Link elements.
However if I set the width of my Link element any wider than 27px is falls to the next line even though I should have up to 31px left of the container Div to fit the Link element in. Relevent HTML and CSS below...
HTML
<section>
<img src="images/logo11w.png">
<div name="search">
<input>
</div>
</section>
CSS
div[name="search"]{
display: block;
margin: auto;
height: 27px;
width: 572px;
background-color: green;}
input{
display: inline-block;
width: 541px;
height: 27px;
border-style: none;
background-color: yellow;
padding: 0;
margin: 0;}
div[name="search"]>a{
display: inline-block;
width: 27px;
height: 27px;
background-color: red;
margin: 0;}
Could someone explain why my link element cannot be wider that 27px without falling to the next line? I am OK with having the width be only 27px I just wanted to understand why this is happening from a technical standpoint.
inline-block displays the whitespace in the actual layout in the rendered html... one whitespace is 4px . so if you want your link to have 31px width, you need to give margin-left:-4px or remove the whitespace in the actual layout.
<section>
<img src="images/logo11w.png">
<div name="search">
<input>
</div>
</section>
updated fiddle with no white space:
http://jsfiddle.net/x6Mq5/
updated fiddle with margin-left:-4px;
http://jsfiddle.net/x6Mq5/1/
I have a menu bar the is centered on the screen. To the left I have a element as well as one to the right. These have background images that tie the menu bar to the rest of the graphical layout.
The problem is that there are white spaces between the tags. Here is the CSS:
#menu_items {
display: inline-block;
position: relative;
margin: 0;
padding: 6px;
top: -9px;
height: 15px;
background-color: #75784D;
}
#swoop_left {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_l.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
font-size: 0px;
border: solid red 1px;
}
#swoop_right {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_r.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
border: solid red 1px;
}
The images themselves are 140px x 21px (w x h).
I can't float them because the menu won't center. I can't use
font-size: 0px;
on the parent container because it won't display the menu items, and setting the menu-items to
font-size: 1em;
afterwards doesn't fix the issue.
Anyone have a solution that will work in all browsers and doesn't rely upon JS?
NOTE: The borders of the two elements are for layout purposes only and won't be in the final code.
How exactly are the items in the menu generated? In the div that contains the menu are you using an unordered list?
If you are then one possible solution would be to add the left and right images to the :first-child and :last-child elements of the list using css. You would no longer need the two extra div elements and so could just concentrate on the single menu container.
There are four ways which i know & which you can use to remove the whit space.
1) as you said give font-size:0; to your parent DIV & define the font-size:15px; to your child divs.
2)You have to write your mark up in a single line like this:
<div class="parent">
<div>1</div><div>2</div><div>3</div>
<div>
Instead of this
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
3) Not that good solution but some time effective. Give margin-letf:-5px in your div. Like this:
div + div{margin-left:-5px}
4) At last you can use float instead of inline-block;
set background color to check your div width and height and you can use margin-left: with negative value to stand your div perfectly.
I am trying to center a div button and its not working
here is the css
.game-actions{
margin-left:auto;
margin-right:auto;
}
.game-actions a.up {
display: block;
text-decoration: none;
font-weight: bold;
padding:12px 32px;
float: left;
border: 1px solid #c1d9f6;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.game-actions a:hover {
border-color: #80b0ea;
background:#e1ecf3;
}
here is the html
<div class="game-actions">
<a class="up" id="a1" href="#" onClick="toggle(this.value)">Tweet it</a>
</div>
Website is at - http://gibberize.com/
By default, div tags expand their width to the entire width of their parent container. Thus setting their margins to auto doesn't do anything since it just auto-sets both margins to 0. If you set a fixed width for the div then it will center.
By default div elements are the full width of the page and since you aren't specifying how wide it should be the auto margin will be 0 on both sides.
In this case I would use a text-align: center; on the div to center the link.
Here's one solution for you. To your first .game-actions CSS class add:
width:1px;
Also, change the caption Tweet it to:
Tweet it
(to avoid breaking the button over 2 lines)