I am having some trouble formatting DIVs. I'm not much of a web guy so sorry if this question is a little silly.
Currently in my web page I have a Form with 3 divs inside. One div lays on-top, and the other two lay abreast:
However if the bottom two divs are both set to 50% width of the container they will stack vertically. If set to 50% and 49% they will stay abreast but there is a large ugly gap:
Here is a simplified version of the HTML, the styling is included.
<form id="Form1" style="width:100%">
<div id="Div1">
<table id="Table1" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
<div id="Div2" BorderWidth="1" Style="display: inline-block;
width: 49%; float: left;">
<table id="Table2" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
<div id="Div3" BorderWidth="1" Style="display: inline-block;
width: 50%; float: Right;">
<table id="Table3" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
</form>
Thank you for your help.
I would use flexbox.
Use tables for tabular data and not layout.
You will need to account for the width the border adds to your element's width. The simplest fix is to apply box-sizing: border-box; to those elements. This will tell the browser to include the border when calculating the width.
i.e. If you tell an element to have a width and height of 200px and give it a 5px border, without box-sizing: border-box; your element will have a width and height of 210px ( 5px + 200px + 5px ). With box-sizing: border-box; the border is included in the width so the width and height remain 200px and the border is placed within, reducing the available space for content.
div {
min-height: 100px;
}
form {
display: flex;
flex-wrap: wrap;
}
div {
box-sizing: border-box;
}
div:nth-child( 1 ) {
width: 100%;
border: 1px solid red;
}
div:nth-child( 2 ) {
width: 50%;
border: 1px solid green;
}
div:nth-child( 3 ) {
width: 50%;
border: 1px solid yellow;
}
<form>
<div></div>
<div></div>
<div></div>
</form>
That's because the border-width. If you puts 50% + 50% + borders is more than 100%. I don't remember right now but exist a css property or something similar that's allows to the border to be included to the % of width. That will fix your problem.
Related
What I am trying to do is to have 4 images align in a cross like pattern. I was thinking of using a table, but I do not want the corners, which will be while space to be the same as the image. And I want to be able to use different size images without having the page change if the image is a different dimension. I do not know how to approach this.
Below is an image of a rough sketch of what I am trying to do. One thing is that the images might be taller or longer.
Thanks in advance.
One solution would be to create invisible div elements that occupy the same height as your images, and inject them in the correct locations in the HTML:
div, img {
float: left;
width: 33%;
height: 100px;
}
See the fiddle with same image sizes here.
You can slightly modify this to use variable heights for your images by wrapping each row in its own div, then setting them height of each of those:
.top *, .middle *, .bottom * {
float: left;
width: 33%;
height: 100%;
}
.top, .bottom {
height: 100px;
}
.middle {
height: 200px;
}
See this fiddle for variable heights.
Update:
There's also the option to change the 'inset' of the middle row by giving the div a smaller width and adding margins to the two images in the middle row:
.middle div {
width: 20%;
}
.middle img:nth-of-type(1) {
margin-left: 6.5%
}
.middle img:nth-of-type(2) {
margin-right: 6.5%
}
Fiddle demonstrating this.
You can always play around with the width of the invisible div and the margins in order to get the desired output :)
Note that I've used widths that add up to 99% in these examples. You can get more specific if you'd like, but you'll never be able to reach 100% ;)
Hope this helps!
Here is another option using Flex-box
this solution can accommodate images of different sizes
and you can read more about it here
.wrapper {
font-size: 150px;
/* <-- adjust this to proportiantly scale everything */
outline: 1px dotted red;
}
img {
width: 1em;
}
.container,
.row-container {
display: flex;
width: 3em;
}
.container {
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.row-container {
justify-content: space-between;
flex-direction: row;
}
<div class="wrapper">
<div class="container">
<div>
<img src="http://placehold.it/100x150">
</div>
<div class="row-container">
<div>
<img src="http://placehold.it/150x120">
</div>
<div>
<img src="http://placehold.it/170x110">
</div>
</div>
<div>
<img src="http://placehold.it/190x200">
</div>
</div>
</div>
And here is a table solution
which can also use images of varying size with radius corners
td {text-align:center;vertical-align:center;}
td img {border-radius:4px;}
<table cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td><img src="http://placehold.it/310x120"></td>
<td></td>
</tr>
<tr>
<td><img src="http://placehold.it/175x110"></td>
<td></td>
<td><img src="http://placehold.it/300x150"></td>
</tr>
<tr>
<td></td>
<td><img src="http://placehold.it/280x100"></td>
<td></td>
</tr>
</table>
I'm trying to get away from using the table layout to do specific layouts. I know it's sloppy programming so I'm redoing it. I can't seem to recreate something like this using the div tag:
<table border=10 cellpadding=10 width="90%">
<tr>
<td align="center" width="143">
<img src="http://blah.com/images/133widepixelimage.jpg">
</td>
<td align="center">
Some text describing the image
</td>
</tr>
</table>
I've got the border, padding, width and alignment all done in a CSS file, and that works fine. But setting the width of the centered image still doesn't allow the centered text to show up to the right of the image. It still wraps to the next line. If I center the image left, and set float: left, that works. But not two centered even if the parent div is wide enough to accommodate.
Try this snippet:
.container{
margin-top: 30px;
width: 90%;
display: flex;
border: 10px solid black;
height: 50px;
border-left-color: gray;
border-top-color: gray;
}
.img{
width: 143px;
}
.img > img{
width: 100%;
}
.container > div {
vertical-align: middle;
line-height: 40px;
text-align: center;
margin: 1px;
border: 1px solid black;
display: inline-block;
}
.text{
flex: 1;
}
<div class="container">
<div class="img">
<img src="http://blah.com/images/133widepixelimage.jpg">
</div>
<div class="text">
Some text describing the image
</div>
</div>
You can do it with divs, using flexbox like the example showed above
I know there are similar questions, but I was not able to find answer to my question.
I have two divs next to each other, left is fixed width of 220px and right should take up the rest of the space. The trick is that the right one contains a table that should be fluid too and always stay as wide as it can.
I tried it even without right div, so there was div on left and table on right. If I don't give the table set width of 100% its fine, but then table stays at about 150px, and does not occupy all free space (as table changes size based on content).
Here is the JSFiddle: http://jsfiddle.net/4tchm0r9/6/
.wrapper {
width: 100%;
max-width: 800px;
}
.left {
border: 1px solid green;
float: left;
width: 220px;
}
.right {
width: 100%;
border: 1px solid red;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Thanks for any help. I Googled, but haven't found nothing.
Ps.: I can not set both of them to % or use table for it, as depending on device size, I will be swapping their positions (the two divs on left will go next to each other and the one on right will go below them).
I also can not use calc function for backwards compatibility, no JS too. Pure HTML and CSS required.
Did you tried use table properties?
The .wrapper can be the table, then their children will be the cells. Look:
.wrapper{
width: 100%;
display: table;
}
.left{
border: 1px solid green;
width: 220px;
display: table-cell;
}
.right{
border: 1px solid red;
display: table-cell;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Fiddle: http://jsfiddle.net/83295cvs/
Add both of those divs to a 100% parent container, with position set to relative. Then, the fixed div with width of 200px should be absolutely positioned on the top left, and add padding-left to the right div equal to the left div's width.
http://jsfiddle.net/z12p0b5v/
HTML:
<div class="container">
<div class="left">
<div class="content"></div>
</div>
<div class="right">
<div class="content"></div>
</div>
</div>
CSS:
.container {
width: 100%;
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.left .content {
width: 200px;
height: 200px;
background-color: red;
}
.right {
padding-left: 200px;
}
.right .content {
background-color: blue;
width: auto;
height: 300px;
}
Just put table with width:100% into a div with display:flex
.wrapper{
width: 100%;
max-width: 800px;
}
.left{
border: 1px solid green;
float: left;
width: 200px;
}
.right{
border: 1px solid red;
width: 100%;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<div style="display: flex;">
<table class="right">
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
</table>
</div>
</div>
I have a webkit scrollbar attached to a div. I have disabled the default scrollbar by setting the overflow property to hidden, in the body element. I can see the scrollbar which is attached to the div, but cannot see its thumb, and hence also not able to scroll. The div to which scrollbar is attached has id="container". Here is the css -
html
{
}
body
{
overflow-y:hidden;
overflow-x:hidden;
}
#container
{
height:100%;
overflow-x:hidden;
overflow-y:scroll;
}
#Title
{
padding-bottom: 10px;
}
table
{
width: 100%;
table-layout: fixed;
}
#container::-webkit-scrollbar
{
background: transparent;
width: 12px;
}
#container::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(10,11,12,0.3);
/* border-radius: 10px; */
}
#container::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background:rgba(104,102,102,0.8);
}
The container hosts a div (with id="Title"), and a table. The table has lot of content, so scrolling should happen, but unfortunately it doesn't. If someone could please point out what am I doing wrong, that would be great. Thanks!
Edited : Adding the html -
<body>
<div id="container">
<div id="Title">
<span id="Heading_part_1">abc</span>
<span id="Heading_part_2">xyz</span>
<span id="Heading_part_3">pqr</span>
<span id="Timestamp"></span>
<span id="WrenchIconContainer" onclick="togglemenu();">
<input type="image" src="res/wrench-arrow-icon.png" width="18px" height="18px"/>
</span>
<div id="menu_container" style="display:none">
<p id="id1">sfdf</p><p id="id2" onclick="dosomething();">ffsdf</p>
</div>
</div>
<table id="table1" cellspacing="0" width="auto">
<thead>
<tr>
<th id = "headline" width="85%"></th>
<th id = "storytime" width="15%"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
Because your #container has a height of 100%, the scrollbar "thumb" has no reason to appear because container is actually big enough to fit the entirety of its contents. If you give it a fixed, pixel height, your "thumb" will appear and function beautifully. Here's an example.
If you wrap your container with yet another wrapper and give it position: relative; you can leave your container with a 100% height, but add
position: absolute;
top: 0;
left: 0;
If what you're really trying to do is replace the main browser scroll bar for the page, just replace #container with body for your ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb selectors.
How can i make the inner table to overlap the parent div with 5 px while resizing?
my current solution:
<div id="crop">
<table style="width:105%; height:105%;">
//table cells
</table>
</div>
problem is that it gets smaller when resizing...
how can I make it constantly overlap with 5px;
The folling seems to work nicely in FF3, Chrome and IE7. Though using expressions in CSS styles for IE is not ideal.
You should see that when rendered, the blue "outer" div is displayed within the "inner" div. The "inner" div will be red for browsers other than IE where it will be green instead.
Also note, in this example I had to subtract 2px from the height of the "inner" div to adjust for the top and bottom borders.
<html>
<head>
<style type="text/css">
#outer {
position: relative;
border: solid 1px blue;
height: 100px;
}
#inner {
position: absolute;
border: solid 1px red;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#inner {
border: solid 1px green;
height: 108px;
width: expression(document.getElementById("outer").clientWidth + 10);
}
</style>
<![endif]-->
</head>
<body>
<table width="100%">
<colgroup>
<col />
<col width="100" />
<col width="200" />
</colgroup>
<tr>
<td>
<div id="outer">
<div id="inner">
<table border="1">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>
</div>
</div>
</td>
<td>Alpha</td>
<td>Beta</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
</body>
</html>
In short:
Stick the table inside another div and set the table's width to 100%
Make that div do the moving around by setting its positioning to absolute (make sure the parent has relative) and set its width to 100%.
Use negative margins on the new div to pull it out by precisely 5px.
It's a bit messy but you'll definitely need negative margins and you'll probably need the position:absolute to have it overlapping...
Have you tried the following:
table {
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
This table will overlap the div with 5px at the right hand side and at the bottom. Margins are added to make the table fill the left hand side and top. Just omit the margins if you want the whole table to offset. You'd probably have to add some style to the div or content above the table, to keep the div from collapsing.
Here's a full example:
<style type="text/css">
#container {
background-color: red; //color added for illustration
}
#data {
background-color: blue; //color added for illustration
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
</style>
<!-- ... -->
<div id="container">
some text to make the div visible at the top
<table id="data">
<!-- rows -->
</table>
</div>