This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?
(2 answers)
Closed 2 years ago.
I try to get two divs in a row. One fixed (220px), the other fills the rest of the page so it's always 100% in total.
I've also read similar threads like this one:
Two divs in one row
I tried several approaches, Bootstrap, Flexbox, Floating Divs, in the end I used calc, but I couldn't get 100% accurate results.
My favorite approach would be with Bootstrap, but I couldnt get this to work, no matter if with a grid or other options.
The actual approach seems kinda messy: Whenever I use calc() and substract the same width of the first container, it's displayed in a second row. Only when I substract 4px more, it's shown in the same line.
I guess this is the right and the left border of both divs or so. There's also a little margin between the divs, even if I set margin to 0px.
<div style="width:220px; display:inline-block; background-color:#F00; margin: 0px;">
1
</div>
<div style="width: calc(100% - 224px); display:inline-block; background-color:#FF0; margin: 0px;">
2
</div>
My question is easy: How can I do this accuratly?
Related
I have a div #customers_table which contains several <div> columns. I am not using any <table>, rather I make my inner divs behave like a table columns. These columns/data is coming from database. So the columns can be less or more depending on what you choose to add or remove in this web page.
I can't set a fixed width to #customers_table as I explained above we don't know in advance how many columns are going to display. So I wanted a horizontal scrollbar when the columns are enough to view in screen. The horizontal scrollbar will appear when the columns are out of viewpoint.
A sample extracted part of my HTML:
<div id="customers">
<div id="customers_table">
div columns
div columns
div columns
...
...
...
</div>
</div>
To achieve this, I wrapped my #customers_table div within a parent div #customers. I have applied following CSS to these 2 divs:
#customers {
overflow-x:auto;
overflow-y:hidden;
width:100%;
}
#customers_table {
border:1px solid red;
min-width:1500px;
padding:5px;
}
You can see that I am applying a min-width of 1500px. Though it does work when I add 2 or 3 more columns from my website. But when I add more and more columns the columns headers/divs are screwed up and break to second line.
Please see the screenshots below:
This is fine (when columns are less):
We can scroll through to see hidden data.
But when we add more and more columns then this issue arises:
I can't increase min-width since I don't know how many new columns will come in this table. So what is the solution to this problem so that the end result should match with my first screenshot irrelevant of the fact how many new columns a person can add?
This question already has answers here:
Add vertical whitespace using Twitter Bootstrap?
(13 answers)
Closed 6 years ago.
I've been using Bootstrap for the past couple of weeks, and I love the grid system and the interesting usage of HTML5 Data Attributes, but one thing I can't seem to get my head around is spacing.
I can create row one after another, or even just containers, and as much as their are evident gutters between each column (col-md-*), there is nothing vertically to space your content.
In my most recent project, I created some divider classes just to add some vertical margins in between some of my containers -- but this feels redundant.
How are you supposed to go about properly spacing your content?
It seems, there are no special classes in Bootstrap for that. But I think, it's for good.
Bootstrap cannot always "know", how many space you will need. You must create it yourself. That's why you are a developer :)
Look at these solutions: Add vertical blank space using twitter bootstrap:
1) use bootstrap build-in class form-group
<div class="form-group">
</div>
2) or add additional block after every row you need:
<div class="col-xs-12" style="height:50px;"></div>
3) or create a new class and add additional block after every row you need:
CSS:
.spacer { margin:0; padding:0; height:50px; }
HTML:
<div class="spacer"></div>
4) Or, if you really need space after every row element, add additional style for row class:
.row { padding-bottom: 50px }
Example: https://jsfiddle.net/3a36p06h/
This question already has answers here:
How to make a div fill a remaining horizontal space?
(26 answers)
Closed 7 years ago.
I have 2 Divs. They are both floating left and div1 has a variable.
#div1: 8%;
The HTML is:
<div class="div1">Icon</div>
<div class="div2">Big Text</div>
Can I tell the div2 that it has to use the rest of the width? So, in this case that should be 92%. How can I do this without creating a second variable? The 2 divs together have to be 100% wide.
In all seriousness, it would've been faster for you to either try or read the starters manual than to ask this question.
#div1: 8%;
.selector {
width: 100% - #div1; //Evaluates to 92%
}
This question already has answers here:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
(6 answers)
Closed 9 years ago.
I want to put several divs into a container div, and line them up to make the container look like it has columns inside.
<div>
<div id="col_1"></div>
<div id="col_2"></div>
</div>
I can choose those divs to be inline-block or make them float:left with specific width and append a empty div to the last which the css style is clear:both.
Both seem fine, but which way should I do it?
In a word, if your page needs to run on old browser (less than IE8), consider the float method.
If you have no matter with this, then use display: inline-block (or any of the other new display properties). It's cleaner (as you don't need an HTML element to restore the float) and simpler.
It's a personal choice.
When using float you must clear them, so like you said you can add a clearing div or make the container with overflow: auto;.
When using inline-block you should have in mind you should add font-size: 0 to the parent div to remove the spacing between the divs and add the default font-size to the divs. (there is the negative margin fix, but I don't personally like it)
If you want the col1 to be in the left and col2 to be at right, better use floats (left/right).
If you want the cols to be verticaly aligned in the middle/bottom, better use inline-block.
But for most other cases is personal choice.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS - Equal Height Columns?
I'm not the greatest with css, so my page layout looks like this:
<div style="width:80%;border:1px solid #000;">
<div style="float:left; width:33.3%; background:#aaa;">one</div>
<div style="float:left; width:33.3%; background:#bbb;">two</div>
<div style="float:left; width:33.4%; background:#ccc;">three</div>
<div style="clear:both;"></div>
</div>
div one has the side links and image
div two holds the main content
div tree has some ads div
now when the main content increases in size the other two stay the same height, so how do I get the height for all 3 divs to increase??
I used this recently for one of my websites.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
This worked great for me. you may have to reverse engineer the code a little to get your columns to the right widths for you.
I researched that topic some time ago, and as I remember, there no clear CSS way to do it...at least in CSS 2.0. I found some workarounds like background image, or playing with overflow. For myself, I choose to use java script to make same height all divs that I need.