I am having an issue in Chrome where a fixed width div is not displaying properly. Please see my jsFiddle.
I have three nested divs.
.container {
background: red;
width: 375px;
}
<div class="container">
<div style="display: table; width: 375px; background: red;">
<div style="display: table-cell; width: 375px; background: blue">
Content
</div>
</div>
</div>
I have also given class "container" a fixed width of 375px. But, in Chrome, the table is actually coming back with a width of 374.4px instead of 375. As a result, some of the background container div is seen to the right side of the table. I have tried multiple combinations of table-collapse, box-sizing and table-display properties but can't seem to get this right. Any ideas?
Using Chrome: 58.0.3029.81
use this CSS:
table-layout: fixed
<div style="display: table; table-layout:fixed; width: 375px; background: red;">
Related
I have a page layout with several nested CSS tables. All of these tables have 100% height. As long as the browser window is high enough to fit all without scrolling, all the tables have the correct height. When the browser window get too small to fit the height of the content, the innermost table collapses in height and the 100% height is ignored. This happened with IE 11. All other browsers manage to get it right, including Edge.
I have tried different CSS rules, especially adding explcit 100% height to all parent elements. I also tried adding all divs for the table rows.
JSFiddle: https://jsfiddle.net/181d0qu1/1/
To reproduce the error, use IE and reduce window height until the vertical scrollbar appears.
html, body {
height: 100%;
margin: 0;
}
.table {
display: table;
height: 100%;
background: #9A9A9A;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: top;
}
#spacer {
height: 400px;
background-color: silver;
}
#right > div {
background-color: rgb(194, 206, 214);
}
#top > div {
height: auto;
background: #EECCCC;
}
#bottom > div {
height: 1px;
background: #EECCEE;
}
<div id="container" class="table">
<div class="cell">
<div id="intermediate" class="table">
<div class="cell">
<div id="spacer">spacer</div>
</div>
<div class="cell">
<div id="right" class="table">
<div id="top" class="row">
<div class="cell">top</div>
</div>
<div id="bottom" class="row">
<div class="cell">bottom</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is a screenshot showing the behaviour in IE (correct when window is high enough to the left, resized window on the right):
Is there a way to make IE keep the innermost table at 100% height without leaving away any of the nested elements?
I'd like to lay out HTML divs relative to one another, like Android's RelativeLayout.
Any idea how to achieve it? Thanks.
EDIT: The question is a general one but I see people request a specific example so here's the one from the link. You can simplify the example layout requirement to be: Blue square from start to finish. Below it two squares: Red and Yellow. Yellow to the right of red till the end. Below the yellow, a green square aligned to the right. Overall 4 divs, laid out relative to one another.
You can put divs on the same 'line' by using the display property in CSS.
Use
display: inline;
or
display: inline-block;
'inline-block' means your div can be given height and width properties while 'inline' will just be the size of your content. In this case, you'll probably want to use inline-block so you can line up your divs.
Found a way using float and clear:
<!DOCTYPE html>
<html>
<body>
<div style="width: 100%; height: 50px; background-color: blue;"></div>
<div style="width: 60%; height: 50px; background-color: red; float: left"></div>
<div style="width: 40%; height: 50px; background-color: yellow; float: left"></div>
<div style="width: 40%; height: 50px; background-color: green; clear:left; float: right">
</body>
</html>
You can play with the code here.
* The purpose of clear:left is to keep the green in the next line - even when the sizes of the red and yellow get changed to pixels instead of percentage.
Like Android, in HTML you cannot directly define Linear or Relative Layout. But through CSS you can define whatever design you want.
For example, in your question you have asked four inputs to align in a particular format.
You can wrap all inputs in a div, and make it align using float property.
The layout is here.
Edit: Here is the layout with .div2_2 in px value.
You can achieve this layout using the following html and css.
HTML
<div class="parent">
<div class="div1">
<input type="text" placeholder="Reminder Name"/>
</div>
<div class="div2">
<div class="div2_1">
<input type="text" value="Wed, Jun 27, 2012"/>
</div>
<div class="div2_2">
<input type="text" value="8.00am"/>
</div>
</div>
<div class="div3">
<div class="div3_1">
<input type="button" value="Done"/>
</div>
</div>
</div>
CSS
div{
padding: 3px 0;
}
input {
width: 100%;
}
.parent{
width: 400px;
}
.div1, .div2, .div3{
width: 100%;
}
.div2{
display: inline-block;
}
.div2_1, .div2_2{
display: inline-block;
}
.div2_1{
width: 55%;
float: left;
}
.div2_2{
width: 44%;
float: right;
}
.div3_1{
width: 30%;
display: inline-block;
float: right;
}
I hope this will be helpful for you.
Check out this page to find out how to layout your webpage in a "Grid System"
getbootstrap.com/css
Sorry, I'm sure this question has been asked before, but if there anyway to do the following:
I have three divs in-line like the diagram shown below, when the browser window is shrunk it automatically drops each div to the next line. I know that I could use the #media command and assign a different css stylesheet if the browser is a certain size, but it would be great if I could make it fluid.
Before:
After:
Thank you!
Wrap the divs in a container element, like....
<div class="wrapper">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
</div>
Then make sure .wrapper has a set width, most likely a percentage. If it has a set width and the inline elements are all floated left, once there is no longer room within the .wrapper div, they'll shift to the next line.
Try:
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
and:
.box {
background: #000;
width: 300px;
height: 300px;
float: left;
}
They should automatically drop when below 900px, see: http://jsfiddle.net/JQFH7/
Elements into it
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div>
CSS
.inner
{
width: 100px;
height: 100px;
display: inline-block;
background: black;
}
div#wrapper
{
width: 100%;
text-align: center;
}
JSFiddle
I have this code: http://jsfiddle.net/spadez/TPKLv/
<div style="background-color:white; width: 400px;">
<span class="status" id="active"></span>Title
6
</div>
<div style="width: 100%; background-color: white; float:right;">
Test test
</div>
I'm trying to make the right column fluid, taking up the remaining space, and the left column fixed width. Can anyone tell me what I am doing wrong with my code, and if this is the best way of doing it?
Simplest is to use display:table-cell; (IE8 and above supported )
this way, you can fix the width of one div and next div will take up the remaining space
Once added, you can even use inline native methods like vertical-align, and since its not floating, adjusting the position of divs is easy through margin and padding depending on you layout! :)
check this demo
It is most compatible and cleanest you can get for fixed width and dynamic width in a page
for calc, it is incompatible with IE9 still
if you have to use it on regular basis, create a span as below :
span.fake_width{
display:block;
width:20px;
}
then just add it to the existing layout Demo
I suggest this, with the condition always left div width is 400px. And i assume is cause you use inline-style
html
<div style="background-color:white; width: 400px;float:left;">
<span class="status" id="active"></span>Title
6
</div>
<div id="rightCol" style="background-color: white; float:right;">
Test test
</div>
css
body {background-color: gray;}
#rightCol{
width: calc(100% - 400px);
}
fiddle
The most native way of doing this is to manipulate the box model:
I've added a float to the first div, and removed it from the second one.
this way the first div is treated as an inline-block and the second one is a block, which tries hard to ignore other inline blocks.
i've updated your fiddle: http://jsfiddle.net/TPKLv/3/
<div style="background-color:white; width: 400px; float:left">
<span class="status" id="active"></span>Title
6
</div>
<div style="width: 100%; background-color: white;">
Test test
</div>
Try like this: Demo
CSS:
.container {
background-color:blue;
height: auto;
overflow: hidden;
}
.sidebar {
float:left;
background-color:grey;
width: 100px;
}
.content {
background-color:green;
float: none;
width: auto;
overflow: hidden;
}
HTML:
<div class="container">
<div class="sidebar">
<span class="status " id="active"></span>
Title
6
</div>
<div class="content">Test test</div>
</div>
UPDATED FIDDLE LINK.
As you need, I added padding and margin for the div's and its working fine.
I'm reworking a layout currently using tables for a two-column design, and ran into some problems.
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="leftcol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#leftCol
{
margin-right: 10px;
width: 49%;
float: left;
}
#rightCol
{
width: 49%;
float: left;
}
Originally I had a two-columned table with width=100% - this worked perfectly in Firefox, but in IE the table overflowed the #frame div container. I removed this table and added two floated divs, but I still have issues getting the columns to be equal.
All of my content resides inside the div #frame, which has height constraints as well as padding and a margin (I use this to leave a "gutter" around the edge of the page).
I need the two floated DIV columns to be the same width, and sit next to each other with a 10px (ish) gutter in between. I tried making both width: 50%, but this fails because the container they are in (#frame) is smaller width-wise then the whole body of the page. (If I get rid of the gutter padding, it works in FF but still not in IE.
Making each column width: 49% works, but looks ugly as the size changes between browsers and the right column does not line up with the edge of the #frame container.
I tried doing this before but ultimately went back to tables 9since it seemed to be working), but now that I see it's incompatible with IE I've been working for hours to find a cross-browser css solution. Any ideas?
Setting each column to 50% should work, if you make sure they don't have any margins or paddings.
If they need padding, put in an extra wrapper div, that can have as much padding/margins as neccesary.
For the gutter in between, you could give these wrapper divs a border on left/right side to make it look like a space in between the columns.
Posting a full code example (on jsbin.com for example) would also help us understand your problem more easily. :)
I think you might benefit from a css framework like 960gs or blueprint css it allows absolute grid placement and is cross browser compatible out of the box.
http://www.blueprintcss.org/
http://960.gs/
If you know the width of the frame, you can do this
#frame {
background-color: green;
width: 500px;
overflow: auto;
}
#leftCol
{
width: 245px;
float: left;
background-color: red;
}
#rightCol
{
width: 245px;
float: right;
background-color: blue;
}
<div id="frame">
<div id="leftCol">
<div id="1">blah</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
Otherwise, an add an extra div, and do this
<div id="frame">
<div id="leftCol">
<div id="hack">
<div id="1">blah</div>
</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#frame {
background-color: green;
width: 500px;
overflow: auto;
}
#leftCol
{
width: 50%;
float: left;
}
#hack {
margin-right: 10px;
background-color: red;
}
#rightCol
{
width: 50%;
float: right;
background-color: blue;
}
Ok here you go. This is how it can be achieved.
CSS
#leftCol, #rightCol{
width: 48%;
float: left;
background: red;
box-sizing: border-box;
}
#leftCol{
margin-right: 1%;
}
#rightCol{
margin-left: 1%;
}
HTML
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
If you need here is the vendor prefix for box-sizing.
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Note that you have typo in your HTML wher both div are called #leftCol. There is no#rightCol.