I have two tables inside divs inside another div:
HTML
<div class="container center">
<div class="thing">
<table class="tabel center" style="width:230px">
<tr><td>Example</td></tr>
</table>
</div>
<div class="thing">
<table class="tabel center" style="width:230px">
<tr><td>Example</td></tr>
</table>
</div>
</div>
CSS
.container {
width: 100%;
overflow: hidden;
float: left;
border: 1px solid red;
text-align: center;
}
.tabel {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
.thing {
width: 50%;
float: left;
min-width: 230px;
}
.center {
margin: 0 auto;
}
The two cells are centered correctly
[Image deleted by host]
but when the width of the screen gets too small, the cells go underneith each other (what I want), but they no longer get centered:
[Image deleted by host]
So what I want them to look like:
[Image deleted by host]
You have to remove float: left;, set display: inline-block; and eliminate white space between them.
.thing {
width: 50%;
display: inline-block;
/* float: left; */
min-width: 230px;
vertical-align: top;
}
fiddle: http://jsfiddle.net/3g7xk0sj/1/
Just use media query http://jsfiddle.net/3g7xk0sj/3/
#media all and (max-width: 480px) {
.thing {
width: 100%;
}
}
The problem you are facing is that you are telling each floating DIV (class thing) to be 50% width a minimum of 230px, but it will never span to 100% of the container's width (unless the container is also 230px wide). So the auto margin will only be applied within class .thing's width, which is 230px. Now add to that your table that is ALSO 230px wide, no margin will ever be rendered and consequently you tables will never float in the center.
Try using a CSS media query instead to force a 100% width on class thing when the screen size goes below 460px (230px*2).
Alternatively, use display: inline-block instead of floating, as emmanuel suggested.
Remove float:left & use margin:0 auto in thing class
Demo http://jsfiddle.net/3g7xk0sj/4/
.container {
width: 100%;
overflow: hidden;
float: left;
border: 1px solid red;
text-align: center;
}
.tabel {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
.thing {
margin: 0 auto;
width: 50%;
}
<div class="container center">
<div class="thing">
<table class="tabel center" style="width:100%">
<tr><td>Example</td></tr>
</table>
</div>
<div class="thing">
<table class="tabel center" style="width:100%">
<tr><td>Example</td></tr>
</table>
</div>
</div>
Related
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
I have a 3 column layout which I'm creating using inline-block divs. The left and right columns are fixed widths but the inner column is to hold dynamic content and should expand horizontally as required by it's content width.
That's easy enough... the tricky part is that when the browser window is smaller (horizontally) than the width of the left, right and expanded middle divs, I would like the middle div to scroll and the side columns to stay fixed. In other words, the middle div's size should shrink and grow with window resize but should not grow beyond the available space.
Simply laying out the divs looks like this
https://jsfiddle.net/xzjp5xef/1/
HTML:
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
<div id="spacer">
150px spacer
</div>
</div>
<div id="rightcol">
right
</div>
</div>
CSS:
div {
height:200px;
border-style:solid;
display: inline-block;
border-width: 1px;
vertical-align: top;
}
#container{
white-space: nowrap;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
margin: 10px;
height: 20px;
}
#rightcol {
background-color: red;
width:100px;
}
The point of the "spacer" div is to represent the dynamic content which in this case I've fixed to 150px plus padding. So in this case I want the divs to lay out the way they do in the above fiddle, but then when the window is shrunk horizontally, I want the middle div to scroll and the left and right divs to remain fully visible.
That fails because then the window gets a scroll bar but the middle panel remains the same width and the right hand div disappears into the scrolled region.
My next attempt was using absolute positioning
https://jsfiddle.net/n4zrLqh2/
I fixed the left div to the left and the right div to the right and set the middle div's right and left properties. This is a neat trick which allows the middle div to stretch and take up all available space. This works nicely but doesn't create the effect I'm after when the window is big - because I don't want the middle column to expand further than is necessary to contain its content.
In the end I've solved this with javascript but would much prefer a CSS solution.
Edit: To help others see what I'm trying to achieve, here's the complete javascript solution (which I'd prefer to achieve with pure CSS):
HTML:
<div id="lcol">left</div>
<div id="midcol">
<div id="spacer">150px spacer</div>
</div>
<div id="rightcol">right</div>
CSS:
div {
height:200px;
display: inline-block;
vertical-align: top;
margin: 0px;
float:left;
}
body {
white-space: nowrap;
margin:0px;
max-height: 200px;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
height: 20px;
background-color: gray;
margin: 5px;
}
#rightcol {
background-color: red;
width:100px;
}
JAVASCRIPT (with jquery)
function adjustSizes() {
// Sizes of middle divs are dynamic. Adjust once
// built or whenever the viewport resizes
//
var $leftDiv = $('#lcol')
var $milddleDiv = $('#midcol');
var $rightDiv = $('#rightcol');
// 1. Resize middle div to available viewport space
var maxBodyWidth = $(window).innerWidth() - ($leftDiv.outerWidth() + $rightDiv.outerWidth());
$milddleDiv.css('maxWidth', maxBodyWidth);
}
$(window).resize(function () {
adjustSizes();
});
And the fiddle: https://jsfiddle.net/bjmekkgj/2/
I think setting max-width of spacer will solve your problem in case content increases.
Set max-width to calc(100vw - 200px) if all margin and padding are 0. Otherwise adjust the value 200px taking margin, padding into account.
I have created a plunker. Please check if it solves your issue. Try checking after running plunker in spearate window
http://plnkr.co/edit/WG9v0MyiD2hiaZrOA3Yw?p=preview
For the one example you provided, since the left and right columns are positioned absolutely, you should take up the space somehow. I used padding on the middle column, then nested a "content" block inside that represents the visible part of the middle column. Then, I put overflow-x: auto; on the new content block and set a max-width on the overall container to force the new block to shrink.
(In previous edits, I was attempting to do this same thing but with floats instead of absolutely positioned divs)
* { margin: 0px; padding: 0px; }
#container {
box-sizing: border-box;
display: inline-block;
position: relative;
max-width: 100%;
border: 1px solid black;
height: 200px;
}
.column {
box-sizing: border-box;
height: 100%;
}
#left {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-right: 1px solid black;
background: blue;
}
#mid {
border: none;
padding: 0px 100px;
}
#mid > .content {
box-sizing: border-box;
background-color: yellow;
overflow-x: auto;
height: 100%;
}
#spacer {
width: 150px;
height: 20px;
}
#right {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-left: 1px solid black;
background: red;
}
<div id="container">
<div id="left" class="column">
left
</div>
<div id="mid" class="column">
<div class="content">
<div id="spacer">
150px spacer
</div>
</div>
</div>
<div id="right" class="column">
right
</div>
</div>
...and in JSFiddle form
flexbox can do that.
div {
border-style: solid;
border-width: 1px;
}
#container {
height: 200px;
display: flex;
}
#lcol {
background-color: blue;
width: 100px;
}
#midcol {
background-color: yellow;
flex: 1;
overflow-x: auto;
}
#rightcol {
background-color: red;
width: 100px;
}
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
</div>
<div id="rightcol">
right
</div>
</div>
JSfiddle Demo (showing overflow effect).
Support is IE10 and up.
Try setting the middle div to have a max width with a percentage so it will get thinner with the screen size:
.midcol {
max-width: 25%;
}
I put a value for the max-width in there for an example, but you can change the value.
I have a website with a fluid/dynamic layout in which I need to center specific text elements between images. Everything is all fine and dandy and I have done so by changing the margins of the text elements, however if I were to change the text inside my p tags, the images would no longer be aligned they way they are or the text would no longer appear exactly centered next to the adjacent images.
JSFiddle that resembles my "problem": http://jsfiddle.net/3s4bhwg4/4/
Ideal image if my JSFiddle does not look correct:
Is there a more maintainable way to achieve the same results of centering the text or is using margins to this extent acceptable/considered good practice?
I'm very rusty with web design, so I'll take any criticism happily.
Note: Resizing the JSFiddle width seems to break the layout. However resizing it on my local webpage keeps it constant....
CSS:
#wrapper{
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 100%;
}
.row{
width: 100%;
}
/*Please execuse my use of left/right in naming my ids. */
#contentleft{
float: left;
width: 60%;
}
#contentleft h1{
margin: 30% 5% 0 40%;
}
#contentleft p{
margin: 0 5% 0 40%;
}
#contentright{
float: right;
width: 40%;
}
#contentright p{
margin: 17% 30% 43% 10%;
}
img{
width: 100%;
}
HTML:
<div id="wrapper">
<div class="row">Header</div>
<div id="contentleft">
<IMG src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg"></IMG>
<H1>Random.</H1>
<P> Both texts must be centered next to their adjacent images as well. </P>
</div>
<div id="contentright">
<P>The margins of this text pushes the image down so it aligns with the corner of the other image.
</P>
<IMG src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg"></IMG>
</div>
</div>
This is the closest I could get using a table as suggested by #JStephen: JSFIDDLE
The only way I could make it work was to keep one image un-scaled.
And I couldn't get them to meet exactly in the corners.
EDIT:
Working correctly now...
I managed to hack it by inserting the lower image in the cell above it in the first row, setting its height to 1px and opacity to 0 and floating it. This works because the table layout is fixed so the first row is used to format the table. (By floating the hidden image, the centering of the text is unaffected.) I then set the width of the visible copy of the second image to 100%.
Added padding: 0; in td as well as border-collapse: collapse; in Table to make the corners touch exactly like your pic. (It seems the default padding is not zero)
It works as long as the height of the text is less than that of the (visible) images
HTML
<body>
<div class="row">Header</div>
<table id="wrapper">
<tr id="cont-top">
<td>
<img src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg" />
</td>
<td>
<img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" />
<p>The margins of this text pushes the image down so it aligns with the corner of the other image.</p>
</td>
</tr>
<tr id="cont-bottom">
<td>
<h1>Random.</h1>
<p> Both texts must be centered next to their adjacent images as well. </p>
</td>
<td>
<img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" />
</td>
</tr>
</table>
</body>
CSS
#wrapper {
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
height: 100%;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
z-index: 0;
}
td, tr{
padding: 0;
position: relative;
}
td{
/*outline: 1px dotted red;*/
}
.row {
width: 100%;
padding: 0.5em;
height: 4%;
}
/*top row********/
#cont-top {
height: auto;
margin: 0;
padding: 0;
}
/*image*/
#cont-top td:first-child {
width: 60%;
}
#cont-top img{
width: 100%;
vertical-align: bottom;
z-index: 20;
}
/*text*/
#cont-top td:last-child{
padding: 0;
}
#cont-top td:last-child p {
margin: 0 10px;
vertical-align: central;
}
/*formatting hack*/
#cont-top td:last-child img{
width: 100%;
height: 1px;
line-height: 1px;
float: left;
/*opacity: 0;*/
}
/*bottom row********/
#cont-bottom {
height: auto;
position: relative;
}
/*image*/
#cont-bottom td:last-child {
vertical-align: top;
}
#cont-bottom img{
vertical-align: top;
width: 100%;
left: 0;
z-index: 20;
}
/*text*/
#cont-bottom td:first-child {
vertical-align: central;
padding: 0 10px;
}
My pen
http://codepen.io/helloworld/pen/dqGDk
I want to vertically align 3 divs inside a wrapper div. Each of the 3 divs should have a height of 33%. I can make the layout work when the divs has a height of 33px but I need it as percentage because the wrapper div`s height changes dynamically. Sometimes its 100px height, sometimes 70px etc...
I just want that all 3 are always correct align by using percentage height.
What is the approach aligning divs with percentage?
HTML
<div id="wrapperDiv" style="height:100px;">
<div id="navigationWheelerContainer">
<div id="navigationWheeler" >
<div id="previewTemplate" >1</div>
<div id="previewTemplate" style="background-color: #0094ff;">2</div>
<div id="previewTemplate" >3</div>
</div>
<div id="toggleButtonRight" >◄</div>
</div>
</div>
CSS
#navigationWheeler {
height: 100%;
text-align: center;
width: 100%;
vertical-align: middle;
border: black solid 1px;
background-color: lightgray;
display: inline-block;
}
#navigationWheelerContainer {
float: right;
height: 100%;
}
#previewTemplate {
vertical-align: middle;
line-height: 33%; /* 33px; works but is not dynamic to the wrapper div */
}
#toggleButtonRight {
width: 40px;
border: black solid 1px;
cursor: pointer;
text-align: center;
}
I use flex-box, works way better the list items plus you can place ul,ol,il in flex-box.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
It's much easier if you change to use an unordered list. Also the ID previewTemplate should be a class as the ID has to be unique.
HTML
<div id="wrapperDiv" style="height:100px;">
<div id="navigationWheelerContainer">
<ul id="navigationWheeler" >
<li class="previewTemplate" >Testing</li>
<li class="previewTemplate" style="background-color: #0094ff;">2</li>
<li class="previewTemplate" >3</li>
</ul>
<div id="toggleButtonRight" >◄</div>
</div>
</div>
Then in your CSS you can set .previewTemplate in the CSS to have a height of 33%. Also add list-style: none; to get rid of the bullets. Then in #navigationWheeler set padding-left: 0; to get rid of the spacing.
CSS
#navigationWheeler {
height: 100%;
text-align: center;
width: 100%;
vertical-align: middle;
border: black solid 1px;
background-color: lightgray;
display: inline-block;
padding-left: 0;
}
#navigationWheelerContainer {
float: right;
height: 100%;
}
.previewTemplate {
height: 33%;
list-style: none;
}
#toggleButtonRight {
width: 40px;
border: black solid 1px;
cursor: pointer;
text-align: center;
}
Now when the height of your #wrapperDiv changes the li with class .previewTemplate will change it's height.
Here's a working JSFiddle. Also you should avoid using inline CSS. Have all your styles inside your CSS file. Makes it easier to manage in the long run.
EDIT Adding padding-left: 0 to the CSS for the #navigationWheeler
EDIT Updating the JSFiddle to take in account the padding-left for the <ul>
Try using list items instead of div's. You can easily style and their syntax is more focused on alignment then a div. Also, Your wrapper div's need to be a percentage as well, you can't do a 10% height in a 100px wrapper div..
I have a <div id="content">, which contains <div id="sub-navigation> and <div id="main container">, which themselves are inline-blocks. I would like to be able to make the main container fill the rest of the available page width. Is that possible?
I need columns-strip to expand or shrink based on the number and width of column elements. If the width of the columns-strip exceeds the width of the main container, then a horizontal scroll bar should appear.
* {
margin: 0px;
padding: 0px;
font-size: 10pt;
white-space: normal;
}
#wrapper {
margin: 0px 20px;
background-color: red;
}
#header {
margin: 25px 10px 10px 10px;
height: 50px;
background-color: purple;
color: white;
}
#content {
margin: 10px;
padding: 10px;
font-size: 0pt;
white-space: nowrap;
overflow: hidden;
background-color: white;
}
#sub-navigation {
width: 200px;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
display: inline-block;
overflow: auto;
background-color: yellow;
}
#columns-strip {
padding: 10px;
font-size: 0pt;
white-space: nowrap;
background-color: mediumturquoise;
}
.posts-column {
margin: 0px;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
overflow: auto;
}
#footer {
margin: 10px 10px 25px 10px;
height: 50px;
background-color: navy;
}
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="sub-navigation"></div>
<div id="main-container">
<div id="columns-strip">
<div class="posts-column" style="background-color: lightgray;"></div>
<div class="posts-column" style="background-color: darkgray;"></div>
<div class="posts-column" style="background-color: gray;"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
You have to remove the inline-block styles and float the #sub-navigation div. inline-block is not suited for what you are trying to achieve. When you add no display styles, the div element will be the default value which is block, block elements take up all the available space by default. By floating the #sub-navigation element you make it only take up the space required for its contents.
#sub-navigation {
width: 200px;
height: 150px;
float : left;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
overflow: auto;
background-color: yellow;
}
make sure to add a clear: left element after the #main-container
That's not how inline-blocks are supposed to be used. Best thing to do here is make your navigation box float:left and leave the default display value alone.
If your header, footer and wrapper have specific widths, then yes, you can have your main-container fill the available space. But if you're not specifying widths in your CSS, then you need to determine how big your main-container CAN be based on the rendered width of the containing element (wrapper). The only way to determine that width after the page loads is with javascript. If you want your site to have a dynamic width but still have your content (sub-navigation and main-container) fill the screen, you would either need to use javascript or percentages, and percentages can get ugly when you start looking at varying resolutions of monitors, laptops, etc...
Ever heard of flex box model!!
It is made just for that.
Note in flexbox model all child elements act as flex box model you cant opt out certain things. Which mean if page has navigation and under it content div + side div. You can't make top navigation out of it. Which has implications. So solution is to have all things only that need flex box in one div.