css how to stretch center div to fill allowable area - html

I have a three column layout. My center div is my main content area. I would like that when my content is not wide this div stretches to fill the available space horizontally and while not critical it would be nice to have it stretch vertically also. I used an online layout generator to create this style. See the attached image
Any help would be apreciated.
<!DOCTYPE html>
<html>
<head>
<title>CSS Portal - Layout</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<STYLE>
/* Generated by http://www.cssportal.com */
#import url("reset.css");
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color:#333
}
p {
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 600px;
max-width: 1000px;
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 75px;
background: #FF6633;
border-radius: 10px;
border: 1px solid #eb521f;
margin: 5px;
}
#navigationwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#navigation {
height: 40px;
background: #FFCC33;
border-radius: 10px;
border: 1px solid #ebb81f;
margin: 5px;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 150px;
margin-right: 150px;
float: left;
}
#content {
background: #FF724F;
border-radius: 10px;
border: 1px solid #eb5e3b;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
margin-left:-100%;
float: left;
}
#leftcolumn {
background: #33CCFF;
border-radius: 10px;
border: 1px solid #1fb8eb;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
margin-left: -150px;
float: left;
}
#rightcolumn {
background: #CC33FF;
border-radius: 10px;
border: 1px solid #b81feb;
margin: 5px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #33FF66;
border-radius: 10px;
border: 1px solid #1feb52;
margin: 5px;
}
</STYLE>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<?PHP include 'header_page.php'; ?>
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<?PHP include 'main.php'; ?>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<?PHP include 'left.php'; ?>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<?PHP include 'right.php'; ?>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<?PHP include 'footer.php'; ?>
</div>
</div>
</div>
</body>
</html>


you can use flex layout to solve it, here you can find an example .

Related

Center Horizontally div

I want to center horizontally a div but it works in Google Chrome but in IE not work.
This is my code:
.app-content {
width: 100%;
height: calc(100%);
position: relative;
}
.pagination--custom {
width: fit-content;
margin: 0 auto;
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
height: 50px;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>

fit-content is experimental and won't work in ie or edge: https://developer.mozilla.org/en-US/docs/Web/CSS/width.
Make it display: inline-block instead and put text-align: center on the parent
.app-content {
width: 100%;
height: calc(100%);
position: relative;
text-align:center;
}
.pagination--custom {
display:inline-block;
margin: 0 auto;
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
width: 50px;
height: 50px;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>

Try This: Tested its working!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.pagination--custom {
width: 50px;
height: 50px;
border: 1px solid #000;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
</body>
</html>
JUST SET margin: 0 auto; for pagination

Your margin: 0 auto; has to be on .pagination and remove width: fit-content;.
.app-content {
width: 100%;
height: calc(100%);
position: relative;
}
.pagination--custom {
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
width: 50px;
height: 50px;
margin: 0 auto;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>

How to make a grid with images inside a div with HTML?

I am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>

You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->

separator by not using width hack

I often do the width hack 49% and border 1px to do seperator for 2 column. It worked, just like the below demo. But is there any better way of doing it? I want to avoid this 49% hack, because when the viewport shrink to a larger or smaller size, it's obvious and the design will break.
body{
margin:0;
}
.left {
background: #eee;
float: left;
width: 49%;
border-right:1px solid #333;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>

You can use box-sizing
CSS
body {
margin:0;
}
.left {
background: #eee;
float: left;
width: 50%;
border-right:1px solid #333;
box-sizing:border-box;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
HTML
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
DEMO HERE

Auto height of outer div [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
i know this has been asked before an such, but i've tried like 5 different ways from Stack and 5 from other websites, and i can't seemsto find the right one.
It's a simple problem, the php_content div aren't getting bigger as it should be with content put into it.
/******************************************************
/ CSS RESET
/*****************************************************/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
/*****************************************************/
*{
box-sizing: border-box;
float: left;
}
.container{
width: 1000px;
height: 600px;
}
.code{
float: left;
width: 800px;
height: 600px;
background-color: #333333;
font-weight: bold;
}
.php{
position: relative;
top: 100px;
left: 100px;
}
.php_start,
.if_start{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 5px 5px 5px 0;
}
.php_start span,
.if_start span{
margin-left: 20px;
color: white;
font-size: 12px;
}
.php_content,
.if_content{
display: inline-block;
clear: left;
min-width: 100px;
min-height: 50px;
border-left: 10px solid #CD8B32;
}
.php_end,
.if_end{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 0 5px 5px 5px;
}
.code .if{
position: absolute;
}
.toolbox{
float: left;
width: 200px;
height: 600px;
background-color: #333333;
border-left: 2px solid lightgrey;
}
<div class="container">
<div class="code">
<div class="php">
<div class="php_start">
<span>PHP</span>
</div>
<div class="php_content">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
<div style="height: 100px;"></div>
</div>
<div class="if_end"></div>
</div>
</div>
<div class="php_end"></div>
</div>
</div>
<div class="toolbox">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
</div>
<div class="if_end"></div>
</div>
</div>
</div>

Your php_content div contains a div that is absolutely positioned, which means php_content cannot match the size of its contents.
The fix is to remove this:
.code .if{
position: absolute;
}
Live Example:
/******************************************************
/ CSS RESET
/*****************************************************/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
/*****************************************************/
*{
box-sizing: border-box;
float: left;
}
.container{
width: 1000px;
height: 600px;
}
.code{
float: left;
width: 800px;
height: 600px;
background-color: #333333;
font-weight: bold;
}
.php{
position: relative;
top: 100px;
left: 100px;
}
.php_start,
.if_start{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 5px 5px 5px 0;
}
.php_start span,
.if_start span{
margin-left: 20px;
color: white;
font-size: 12px;
}
.php_content,
.if_content{
display: inline-block;
clear: left;
min-width: 100px;
min-height: 50px;
border-left: 10px solid #CD8B32;
}
.php_end,
.if_end{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 0 5px 5px 5px;
}
.toolbox{
float: left;
width: 200px;
height: 600px;
background-color: #333333;
border-left: 2px solid lightgrey;
}
<div class="container">
<div class="code">
<div class="php">
<div class="php_start">
<span>PHP</span>
</div>
<div class="php_content">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
<div style="height: 100px;"></div>
</div>
<div class="if_end"></div>
</div>
</div>
<div class="php_end"></div>
</div>
</div>
<div class="toolbox">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
</div>
<div class="if_end"></div>
</div>
</div>
</div>

/******************************************************
/ CSS RESET
/*****************************************************/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
/*****************************************************/
*{
box-sizing: border-box;
float: left;
}
.container{
width: 1000px;
height: 600px;
}
.code{
float: left;
width: 800px;
height: 600px;
background-color: #333333;
font-weight: bold;
}
.php{
position: relative;
top: 100px;
left: 100px;
}
.php_start,
.if_start{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 5px 5px 5px 0;
}
.php_start span,
.if_start span{
margin-left: 20px;
color: white;
font-size: 12px;
}
.php_content,
.if_content{
display: inline-block;
clear: left;
height: auto !important;
min-width: 100px;
min-height: 50px;
border-left: 10px solid #CD8B32;
}
.php_end,
.if_end{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 0 5px 5px 5px;
}
.code .if{
position: relative;
}
.toolbox{
float: left;
width: 200px;
height: 600px;
background-color: #333333;
border-left: 2px solid lightgrey;
}
<div class="container">
<div class="code">
<div class="php">
<div class="php_start">
<span>PHP</span>
</div>
<div class="php_content">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
<div style="height: 100px;"></div>
</div>
<div class="if_end"></div>
</div>
</div>
<div class="php_end"></div>
</div>
</div>
<div class="toolbox">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
</div>
<div class="if_end"></div>
</div>
</div>
</div>
Change position: absolute to relative in the .code .if block. This way the reference will be set to the div containing it.

Float right without clearing previous float(s)

I know the obvious solution is to wrap banner and main in a float container, but is there any other way to 'bump' sidebar to the top, given the constraints of the HTML below?
http://html-bin.appspot.com/aghodG1sLWJpbnIMCxIEUGFnZRjJ0wYM
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Floats</title>
<style>
#banner {
width: 70%;
float: left;
padding: 10px;
border: 1px solid blue;
}
#main {
width: 70%;
float: left;
padding: 10px;
border: 1px solid orange;
}
#sidebar {
width: 25%;
float: right;
padding: 10px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="banner">
Banner
</div>
<div id="main">
Main
</div>
<div id="sidebar">
Sidebar
</div>
</body>
</html>

#sidebar {
border: 1px solid green;
display: inline-block;
.display: inline;
.zoom:1;
padding: 10px;
width: 22%;
}