I have a very straightforward HTML page that displays content in two columns. To format the columns I'm using <div> as the outer container (display: table-row) and two inner <div> as the actual columns (display: table-cell). One of these columns has a padding at the top. The markup looks like the following - extra markup and styles omitted for clarity:
<style>
.row { display: table-row }
.cell { display: table-cell; border: 1px solid black; width: 150px }
.content { background-color: yellow }
</style>
<div class="row">
<div class="cell">
<div class="content">Some content; this is not padded.</div>
</div>
<div class="cell">
<div class="content">More content; padded at the top.</div>
</div>
</div>
I'm getting this:
But I expected this:
The behavior is the same whether the padding-top is applied to the cell or the content. Am I missing anything? Thanks.
You can achieve your two desired results just by using padding and margin on your div with the class content. Remember, padding will contribute to the overall width and height of an object, so that will extend the background color.
First screen shot:
<div class="content" style="margin-top: 10px">More content; padded at the top.</div>
Second screen shot:
<div class="content" style="padding-top: 10px">More content; padded at the top.</div>
Related
I am trying to create very flexible grid, my code is approximately as
<div class="grid">
<div class="grid-row">
<td class="grid-cell">TEST</td>
<td class="grid-cell">TEST</td>
<td class="grid-cell">TEST</td>
</div>
</div>
But I have problems:
If I am using td elements inside row, then CSS class styles are not applied sometimes. Styles are applied in React environment, but are not applied in JSFiddle pure Bootstrap environment.
If I am suing div elements inside row, then those div elements are not positioned in one line but each div is in separate line inside the greater div (row) element.
So - is it possible (advisable) to use td elements inside div and without table elements? And if not, then how can I organize div elements (belonging to one row) in one row/line?
This question is related to my other question (there is the links to JSFiddle code as well):
Container div that contains scrollable table and that fills all the client area and that removes page scrolls
Use a list element and set the child elements to inline..
Set list-style-type to none to remove the bulletpoints markers.
ul{
list-style-type: none;
}
ul li{
display: inline;
}
<ul>
<li>
TEST
</li>
<li>
TEST
</li>
</ul>
Also, your div issue.. that's divs desired behaviour since a div is a block element compared to span which is an inline-block element. You should either use spans or set div to inline-block.
If you want a table layout then use display:table
.grid {
display: table;
border: 1px solid;
}
.grid-row {
display: table-row;
border: 1px solid red;
}
.grid-cell {
display: table-cell;
border: 1px solid green;
}
<div class="grid">
<div class="grid-row">
<div class="grid-cell">TEST</div>
<div class="grid-cell">TEST</div>
<div class="grid-cell">TEST</div>
</div>
<div class="grid-row">
<div class="grid-cell">TEST</div>
<div class="grid-cell">TEST Test</div>
<div class="grid-cell">TEST</div>
</div>
</div>
I have three divs vertically aligned side by side. The first div has a max width but for some reason that div is larger than the content. It is the width set for max-width. I would like names to wrap in a way that fits in the max-width and then for the div to shrink to whatever the width the children dictate.
The content is generated dynamically so I do not want to set widths for any div. The only thing I want to set is the max-width of the wrapper of all the names.
It currently looks like the example in the top image - I would like it to look like the example in the bottom:
Here is an example in Code Pen: http://codepen.io/anon/pen/dYPRLX
<div id="exhibition_title_wrapper">
<div id="exhibition_title_name">
<div class="artist_name">Steve Greenberg</div>,
<div class="artist_name">Sarah Thompson</div>,
<div class="artist_name">Bill Bradbury</div>,
<div class="artist_name">Tom Rogers</div>,
<div class="artist_name">Nicole Haight</div>
<div class="artist_name">Barney Franklin</div>,
<div class="artist_name">Todd Franklin</div>
</div>
<div id="slash"><img src="http://s9.postimg.org/r1gx8okp7/slash.png"></div>
<div id="exhibition_title_right">
<div id="exhibition_title_title">Expo 3000</div>
<div id="exhibition_title_date">September 1-20, 2017</div>
</div>
</div>
and this is my CSS
#exhibition_title_wrapper {display:block;}
#exhibition_title_name {display: table-cell;
vertical-align: middle; max-width:300px;}
.artist_name {display: inline-block;}
#slash {display: table-cell; vertical-align: middle; padding: 0 10px;}
#exhibition_title_right {display: table-cell; vertical-align: middle;}
#exhibition_title_title {display:}
#exhibition_title_date {display:}
Can anyone please guide me in the right direction?
I have been trying to figure out how to format a list that has elements (in my case buttons) on the sides. The major problem that I have had is that I do not want the list text to wrap around the buttons, I want it to behave more like a table; text should not wrap into other columns. To complicate things a little further, I do not necessarily know the sizes of the 'Side Elements' in advance.
This is the code I came up with:
<div style='display: table;'>
<div style='display: table-row;'>
<div style='display: table-cell'>
<!--- Variable Width Left Side Element --->
</div>
<div style='display: table-cell; width: 100%;'>
List Text
</div>
<div style='display: table-cell'>
<!--- Variable Width Right Side Element --->
</div>
</div>
</div>
JSFiddle
I have tried this on Firefox, Chrome, Safari and Internet Explorer and it seems to work fine. However, I am still concerned because I do not entirely understand why this works (and I do not like using code that I do not understand). My concern is with width: 100%. Shouldn't this specify that the cell should take up the entire parent, rather than all the space available in that row?
Ultimately, my question is this: Can I trust using width: 100% like this? Is this an appropriate way of solving my problem?
Ultimately, my question is this: Can I trust using width: 100% like this? Is this an appropriate way of solving my problem?
Yes, you can.
Tables are funny that way...when a cell is given a width of 100% it just means take up as much space as you can out of what is left.
So you've already allocated some of the 100% of the parent so the middle div just grabs what's left.
For what it's worth...a `flex-box alternative:
.row {
display: flex;
margin-bottom: .5em;
}
.row div {
padding-left: 5px;
padding-right: 5px;
}
.row div:first-child {
flex-basis: 55px;
}
.row div:nth-child(2) {
flex: 1;
}
.row div:last-child {
flex-basis: 35px;
}
<div class="container">
<div class="row">
<div style="background-color: red"></div>
<div>This text is not too long</div>
<div style='background-color: blue'></div>
</div>
<div class="row">
<div style='background-color: red'></div>
<div>This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long.</div>
<div style='background-color: blue'></div>
</div>
</div>
JSfiddle Demo
when you are mixing both absolute and relative measurements, its good to use calc() function. So the width of the middle element will be,
width: calc(100% - 90px)
100% being the full width of parent and 90px being the absolute measurements with you are excluding (55px + 35px).
Browser will automatically compute the actual width of the element based on the parent width (which is the available width minus 90px). Directly giving 100% is not the correct way, imho.
The width of a table-cell depends upon its content. The cells will expand based on their content unless table-layout: fixed is given on the table.
Instead of using tables you can use floats for example follow this link http://jsfiddle.net/osha90/e57dja5u/
<div >
<div class="clearfix" style="margin:10px 0px">
<div style='width: 55px; height: 35px; background-color: red;float:left'>
</div>
<div style='width: 35px; height: 25px; background-color: blue;float:right'>
</div>
<div style="overflow:hidden;">
This text is not too long
</div>
</div>
<div class="clearfix">
<div style='width: 55px; height: 35px; background-color: red;float:left'>
</div>
<div style='width: 35px; height: 25px; background-color: blue;float:right'>
</div>
<div style="overflow:hidden;">
This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long.
</div>
</div>
.clearfix:after,.clearfix:before{
content: "";
clear: both;
display: block;
}
Because table rows can't wrap, table cell with 100% width will force the cell to occupy as much space as he can. You other two cell have fixed width, because their content have a fixed width, and the a table cell minimum width is the one required to display the content. This means that the 100% width actual width is 100% - the two fixed cell.
I have a regular Bootstrap 3 CSS setup. I want to apply the same heights to columns inside a row and have been looking at using display:table and display:table-cell. This method works but it naturally seems to apply vertical padding on the columns with less content.
Take this HTML for example:
<div class="row">
<div class="col-xs-4">
<div class="block">
Content for block<br />
Some more content<br />
And a bit more<br />
Last bit
</div>
</div>
<div class="col-xs-8">
<div class="block">
Content for block<br />
Only some more content
</div>
</div>
</div>
Then this CSS:
.row {
display: table;
width: 100%; }
.row > div {
float: none;
display: table-cell;
vertical-align: top; }
.block {
height: 100%;
background: red; }
Now the columns do have the same height, but the .block, which has the red background does not reflect this, because the second column has bottom padding applied which I cannot remove.
See this fiddle for an example: http://jsfiddle.net/cyan8fjz/
Is there a solution to get my .block to use the full height:100%? Ideally I do not want to absolutely position the .block because of the left and right padding on the columns (which may change at different screen resolutions).
Note I haven't included the Bootstrap CSS in my example above but I have in the fiddle. Assume it is relevant and included in all examples.
You could use like this ' padding-bottom: 1000em; margin-bottom: -1000em; trick.
Here's an example: Link
I'm trying to float two divs inline with each other inside a div of set width. Additionally they have borders and content that requires wrapping. It stops working when there's more content than fits on one line.
I'm trying to be avoid using tables to solve this (see solution below) but but no luck so far. Any one got any ideas?
Edited question: expanding requirements to include:
the divs should minimise their total width and not expand beyond the boundarys of the two main 50% columns. I've managed to achieve the first and second part (please see my own answer below) however I have an additional third requirement in that as these can be nested, the content then still stays within the two main columns but doesn't expand to fill up to a maximum width of 50% of the columns width. I'm working on a javascript solution which I won't be able to post back for some time.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
body {
width: 1024px;
}
.a_column {
width: 50%;
float:left;
}
.some_text {
float:left;
display:inline;
border: thin solid green;
}
.a_block {
float:left;
display:inline;
border: thin solid red;
/*width: I can't set this as I don't know how much some_text will need, this can vary from nothing to a lot.*/
word-wrap: break-word; /* this doesn't work without a width specified*/
}
/*solution when using tables */
.some_text_in_table, .a_block_in_table {
vertical-align:top;
}
.some_text_in_table div {
border: thin solid green;
}
.a_block_in_table div {
border: thin solid red;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="a_column">
<div class="some_text">
some text here.
</div>
<div class="a_block">
Less text and there's no problem.
</div>
</div>
<div class="a_column">
<div class="some_text">
some text here.
</div>
<div class="a_block">
Putting a lot of text into a div that you want a border around will
cause it to move down one line. Instead I'd like it to float inline
with its sibling div; you can remove the float:left but then it
completely messes up the border. An_additional_thing_I'd_like_is_for_long_sentences_to_be_broken_by_the_word_wrap,_but_this_requires_that_the_width_of
a_column be set and I can't do this as I don't always know how much
room some_text will need.
</div>
</div>
<div style="clear:both;"></div>
<h3> With tables, solution with in 7 minutes. So much easier:</h1>
<table style="table-layout: fixed; width: 100%;">
<tr>
<td colspan="2" style="width: 50%;">
</td>
<td colspan="2" style="width: 50%;">
</td>
</tr>
<tr>
<td class="some_text_in_table">
<div>
some text here.
</div>
</td>
<td class="a_block_in_table">
<div>
some text here.
</div>
</td>
<td class="some_text_in_table">
<div>
Less text and there's no problem.
</div>
</td>
<td class="a_block_in_table">
<div>
Putting a lot of text into a div that you want a border around will cause it to move down one line. Instead I'd like it to float inline with its sibling div; you can remove the float:left but then it completely messes up the border. An_additional_thing_I'd_like_is_for_long_sentences_to_be_broken_by_the_word_wrap,_but_this_requires_that_the_width_of a_column be set and I can't do this as I don't always know how much room some_text will need.
</div>
</td>
</tr>
</table>
</body>
</html>
Fiddle with my code here: http://jsfiddle.net/cdepZ/
display:table-cell;
Example: http://jsfiddle.net/TAhAv/
You are right in wanting to avoid tables with this layout - as you mentioned, this is not tabular data which you are chosing to display.
You mention in your CSS that you cannot set a width on .a_block because you do not know how much space you need. However, when you use a table you are actually setting a width (25%) as each cell is equally split amongst the over-all width.
So to achieve what you want to do (which will match the tables layout), you will have to set a width on these elements.
Here is a JSFiddle of how you could achieve this:
http://jsfiddle.net/ndhrd/39/
Set your widths properly with the space you have. Borders take 2px vertically and horizontally as well.
.a_column {
width: 512px;
float:left;
}
.a_block, .some_text{
width: 254px;
float: left;
word-wrap: break-word;
}
.a_block{
border: 1px solid green;
}
.some_text{
border: 1px solid red;
}
I got it working here:
http://jsfiddle.net/cdepZ/7/
Putting a lot of text into a div is now no problem, it will wrap and break any long sentences that go over 50% of it's parent divs' width. And it will minimise any content that it can whilst maintaining good looking borders.
Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
I think the only solution is a javascript one :|
http://jsfiddle.net/uHEVJ/1/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
body {
width: 1024px;
}
.a_column {
width: 49%; /* 49% rather than 50% to cope with the 1 pixel width borders*/
float:left;
border: thin solid blue;
}
.a_container{
display:inline;
}
.a_container > div{
max-width: 49%; /* 49% rather than 50% to cope with the 1 pixel width borders*/
float: left;
word-wrap: break-word;
}
.some_text {
border: thin solid green;
}
.a_block {
border: thin solid red;
}
</style>
</head>
<body>
<h3> Used a "display:inline;" div as a container to position each Div inside which has float:left (to minimise it's size)</h3>
<div class="a_column">
<div class="a_container">
<div class="some_text">
some text
</div>
</div>
<div class="a_container">
<div class="a_block">
Less text and there's no problem.
</div>
</div>
</div>
<div class="a_column">
<div class="a_container">
<div class="some_text">
some text here.
</div>
</div>
<div class="a_container">
<div class="a_block">
Putting a lot of text into a div is now no problem, it_will_wrap_and_break_any_long_sentences_that_go_over_50%_of_it's_parent divs' width. And it will minimise any content that it can whilst maintaining good looking borders
</div>
</div>
</div>
<div class="a_column">
<div class="a_container">
<div class="some_text">
Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
</div>
</div>
<div class="a_container">
<div class="some_text">
Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
<div>
<div class="a_container">
<div class="a_block">
some text
</div>
</div>
<div class="a_container">
<div class="a_block">
Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>