I would like to display a block of color with different widths and no space in between. To test it out I made this HTML but it does not show as a block:
<div style="text-align: left;">
<div style="display:inline-block;background-color:green; width:0rem;"></div>
<div style="display:inline-block;background-color:red; width:0.3rem"></div>
<div style="display:inline-block;background-color:yellow; width:0.9rem"></div>
</div>
The only way I could make it work is to add  . But now I see a space between the color blocks:
<div style="text-align: left;">
<div style="display:inline-block;background-color:green; width:0rem;"> </div>
<div style="display:inline-block;background-color:red; width:0.3rem"> </div>
<div style="display:inline-block;background-color:yellow; width:0.9rem"> </div>
</div>
Is there a way I can make a square block without ?
Unless you specify a height, a div is as tall as its content. If it has no content, then it doesn't have any height. If it has no height, then there are zero vertical pixels to give a background colour to.
You need to add a height callout is you want to see an "empty" <div>. Like this.
<div style="text-align: left;">
<div style="display:inline-block;background-color:green; height:0.5rem;width:0.5rem;"></div>
<div style="display:inline-block;background-color:red; height:0.5rem;width:0.3rem"></div>
<div style="display:inline-block;background-color:yellow; height:0.5rem;width:0.9rem"></div>
</div>
Related
I am creating a basic text reverser on https://shinkarom.github.io/reverser/ (the source code is https://github.com/shinkarom/reverser). For CSS framework I am using http://mincss.com.
The reverser is split into two columns. The left one has the textarea. The right one has the reversed text.
Unfortunately, the textarea is too small and doesn't fill the whole column. Giving it width: 100%;height: 100%; box-sizing:border-box solved the width problem, but the height is still too small.
As a workaround, I tried to give the textarea 25 rows, but it looked very ugly on a smaller browser window.
Here's the relevant code:
<div class="row">
<div class="col c6">
<textarea id="text" class="smooth" style="width: 100%;height: 100%;
box-sizing:border-box;resize:none"></textarea>
</div>
<div class="col c6">
<div id="result"> </div>
</div>
</div>
How to make the textarea fill the whole height?
put height:100vh instead of 100% if you want the textarea to take full height of page. height:100% can't be applied unless your parent div has specified static height.
<div class="row">
<div class="col c6">
<textarea id="text" class="smooth" style="width: 100%;height: 100vh;
box-sizing:border-box;resize:none"></textarea>
</div>
<div class="col c6">
<div id="result"> </div>
</div>
</div>
I have a problem with my divs. I created 3 divs with same classes. I want to create 3 cards with avatar and personal info on them, but these divs are "sticked". I want to make a gap between them (from right side), but when I make padding-right, there's no gap, but more background color. How can I separate these three divs without changing width?
Here's my code:
<div id="team">
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
</div>
http://codepen.io/anon/pen/PbMBPy
Thanks for help!
You have to use margin-right: 25px; instead of padding-right: 25px;
use margin-right instead of padding-right
I have a div with id=group1port.
Inside this div are multiple divs, one being id group1porteq.
I am using the equal heights to make the div's the same height however, with what I have, it currently changes the heights of all the div's, when I only want it to effect the div group1porteq. I have tried ('#group1port div.group1porteq') but this doesn't work. I have also tried removing the "div" completely and that also doesn't work. Also have tried changing it to ('#group1porteq div') and then that just makes all the div's inside that div equal.
The "div class="portlet light bordered" id="group1porteq"" is the two div's i need to have equal height
I have div's that all have multiple div's inside, and I am trying to just get equal height for 1 div. Here is a sample of the script.
<script>
if($(window).width() > 800){
$('#group1port div').equalHeights();
}
</script>
Here is a sample of the code
<div class="row" id="group1port">
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
</div>
I'm not sure I fully understand what div's you're trying to find, but this find's both 'group1porteq' divs nested within the 'group1port' div.
$('#group1port').find('#group1porteq').each(function() {
// Do equal height stuff
});
I don't know what equalHeights(), but it sounds like your issues are all related to the selectors. You can find a full list of selector options here https://api.jquery.com/category/selectors/
You have a duplicate id: id="group1porteq" on two divs. You cannot have an id be the same on a page. Try changing it to a class as a first step. Can you add some CSS to this bit of code? it would seem that you are trying to break a table apart. Try adding "display: block" to the class: class="group1porteq" once you change that and see if it breaks the table model so you can get individual heights again.
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>
Is it possible to do this with CSS? Given the following HTML:
<div class="main-container">
<div class="left">
...
</div>
<div class="right">
<div class="top">
...
</div>
<div class="bottom">
dynamic content
</div>
</div>
</div>
I want bottom to scroll if it overflows the space between top and the bottom of main-container.
How can this be done without specifying the height of bottom?
I would prefer not to specify height on other elements either if possible. It doesn't right now, but top could have dynamic content as well.
The HTML above can change however necessary; what I require is the end result of a left column, a right column, and the bottom portion of the right column scrolling if its context exceeds the available space in the main container.
In the end, you'll have to specify some kind of limits (either height or max-height) to your elements in order to know if the content goes beyond them.
Once you have those dimensions set up, overflow:auto; will show you scrollbars when you need them.
Hope this is what you are looking for:
<div class="main-container">
<div class="left" style="float: left; width:33%">
...
</div>
<div class="right" style="float: right; width:66%">
<div class="top" style="height: auto;">
...
</div>
<div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;">
dynamic content
</div>
</div>
</div>