I'm trying to make the first div child below use up 100% of the available space minus 20px and then use the second div child to use 20px and be on the same line as the first child div.
<div style="width: 10%;">
<div style="float: left; margin-right: 20px;">Left side, should use up all space except margin!</div>
<div style="float: left; margin-left: -20px; width: 20px;">Should only use 20px no matter what.</div>
</div>
This should be able to be done with CSS level one (that means no position lame-outs) though I know I'm missing something. Also there will be anchors in both div elements that must use 100% of the available width so there is a trick here to get the float to behave a certain way...
Solution #1
Make use of overflow: hidden (or overflow: auto) to fill the remaining horizontal space.
(NB: For this to work you need to place the element on the right hand side first in your markup)
FIDDLE
<div>
<div class="div2">DIV 2</div>
<div class="div1">DIV 1</div>
</div>
CSS
.div1 {
background:yellow;
overflow: hidden;
}
.div2 {
background:brown;
float:right;
width: 50px;
}
Solution #2
You can do this with box-sizing: border-box
FIDDLE
<div>
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
CSS
.div1 {
background:yellow;
float:left;
padding-right: 50px;
margin-right: -50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.div2 {
background:brown;
float:left;
width: 50px;
}
Solution #3
Use css tables:
FIDDLE
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
.container
{
display:table;
}
.div1 {
background:yellow;
display: table-cell;
width: 100%;
}
.div2 {
background:brown;
width: 50px;
display: table-cell;
word-break: break-word;
min-width: 50px;
}
Solution #4 (CSS3 required)
use calc
FIDDLE
On the first child set width: calc(100% - 50px)
On the second div set width: 50px;
.div1 {
background:yellow;
width: calc(100% - 50px);
float: left;
}
.div2 {
background:brown;
width: 50px;
float: left;
}
Can you change the HTML structure a bit?
<div style="width: 10%;">
<div style="display: block; width: 100%;">
<div style="width: 20px; float: right;"></div>
</div>
</div>
Here's another approach using display:table.
<html>
<style>
body { padding:0; margin:0; display:table; width:100%; }
#content { display:table-row; }
#b1, #b2 { display:table-cell; }
#b1 { background-color:#eee; padding:2em; }
#b2 { width:20px; background-color:#bbb; }
</style>
</head>
<body>
<div id="content">
<div id="b1">
<h1>Main content here</h1>
<p>Side bar on right is 20 px wide.</p>
</div>
<div id="b2">
</div>
</div>
</body>
</html>
Related
I have a JS Fiddle here.
https://jsfiddle.net/h3c6jqfy/
Basically, i am trying to make a UI that has a sticky header and footer. The middle content will have three columns. Each columns will have DIVs in them. These DIVs should have 100% height and not be cut off from the footer. Within the DIV, they will have scrollable divs.
The very basic layout I created has this in it...
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!
The part where it says this is the end!! is never reached.
You can use flexbox without the need to calculate heights;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 75px;
background: red;
}
main {
flex: 1;
background: lightgreen;
display: flex;
}
.scrolly {
flex: 1 0 33%;
overflow-y: auto;
}
.content {
height: 1000px;
}
footer {
height: 50px;
background: blue;
}
<header></header>
<main>
<div class="scrolly">
<div class="content"></div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
</main>
<footer></footer>
NOTE: See Fiddle in Full Screen
You can try using flexbox instead of defining every unit, calculate the height to avoid using the space where the footer sits, and let the children div inherit its height
<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}
#header{
height:100px; top:0; background: #4A4A4A;
}
#footer{
height:100px; bottom:0; background: #4A4A4A;
}
#content{
top:100px;
height: calc(100% - 100px);
background:#fff;
display: flex;
align-items: stretch;
}
</style>
<div>
<div id="header">HEADER</div>
<div id="content">
<div style="background-color: #ff0000; min-width: 33%; height: inherit; overflow-y: scroll;">
<div style="background-color: blue;min-height: inherit;max-width: 99%;padding: 20px 40px;">
<div style="overflow: auto; max-height: inherit; padding: 10px;">
<br>d<br>d<br>d<br>d<br>d<br>d<br>d
<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br><br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d
<br>d<br>this is the end!!
</div>
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
middle
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
right
</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>
I've been trying to figure out what my right div is floating out of position.
.header{
background:red;
height:100px;
width:100%;
}
.left{
background:white;
float:left;
height:800px;
width: 200px;
}
.main{
background:yellow;
height: 800px;
width: 600px;
overflow: hidden;
}
.right{
background:white;
float: right;
height:800px;
width: 200px;
overflow: hidden;
}
.footer{
background:red;
height: 100px;
width:100%;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<title>Layout</title>
<body>
<div class="header"></div>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
<div class="footer"></div>
</body>
</html>
Any pointers? I know this is going to be deceptively simple but I've drawn a blank
div{
border: 1px solid #000000;
margin:3px;
}
.header{
background:red;
height:100px;
width:100%;
}
.left{
background:white;
float:left;
height:800px;
width: 200px;
}
.main{
background:yellow;
height: 800px;
width: auto;
overflow: hidden;
}
.right{
background:white;
float: right;
height:800px;
width: 200px;
overflow: hidden;
}
.footer{
background:red;
height: 100px;
width:100%;
}
<div class="header">header</div>
<div style="clear:both;"></div>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div style="clear:both;"></div>
<div class="footer">footer</div>
This is the correct way :
first put the floating elements (left - right) than the non floating one (main)
Also make shure you clear after float ("clear:both")
ps I give thhe main "with:auto" but is not necessary... only more compatible
<div class="header">header</div>
<div style="clear:both;"></div>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div style="clear:both;"></div>
<div class="footer">footer</div>
Semantically, you probably should go with the main content of the page first, then the supporting content. This template also will shrink the content area based on the space available, although that can easily be adjusted with the CSS if you wanted a fixed layout by setting a specific width on the .content element.
<div class="header"></div>
<div class="content">
<div class="main">
<div class="main-inner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
Then for the CSS, you use something like this:
.header, .footer, .content {
clear: both;
}
.header, .footer {
height: 100px;
}
.content {
width: 100%;
max-width: 1000px; /* Keeps the site from growing beyond 1000px */
margin: 0 auto; /* Centers the content area */
}
.main, .left, .right {
float: left;
}
.main {
width: 100%;
}
.main-inner {
margin: 0 200px;
}
.left, .right {
width: 200px;
}
.left {
margin-left: -100%; /* Puts the left sidebar to the top left of the .content element */
}
.right {
margin-left: -200px; /* Puts the right sidebar on the right edge of the .content element */
}
/* Colors and Heights so you can see things */
.main-inner, .left, .right { min-height:600px; }
.header, .footer { background-color: red; }
.main-inner { background-color: yellow; }
http://jsfiddle.net/j1rLfmky/
I'm trying to convert my website from table layout to div layout,
while with the table layout everything was more intuaitive, I get stuck every minute with this div layout, here's my current problem -
I want the text in my left div to be padded from the left and from the top.
If I pad the left DIV itself, the whole div gets expanded (even though the container div has a 700px width defined for it); If I try to margin the text itself, for some reason it only works for creating the left margin, but it doesn't effect the top margin which stays at 0px.
here's my code:
<div id="container">
<div id="left">I want some padding here
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
CSS:
#container {
border: 1px solid #DCD7D4;
width: 700px;
min-height: 680px;
position: relative;
margin-left: auto;
margin-right: auto;
}
#left {
float:left;
width: 500px;
min-height: 680px;
background-color: #F6F1ED;
}
#left #image {
position: absolute;
left: 27px;
bottom: 40px;
background: green;
width: 375px;
height: 48px;
}
#right {
float: left;
width: 194px;
min-height: 680px;
background-color: #F2EEEF;
}
#right #text {
position: absolute;
left: 523px;
top: 154px;
background: yellow;
width: 150px;
height: 70px;
}
#middle {
float:left;
background: #0C9;
background-image:url(midbg.png);
width: 6px;
min-height: 680px;
}
You can add padding to your #left div together with box-sizing: border-box and the layout should remain in tact
#left
{
padding: x px;
-moz-box-sizing: border-box;
box-sizing: border-box
}
Read up on the CSS box model here: http://css-tricks.com/the-css-box-model/
Padding will affect your overall element's specs.
ALSO, this is a great trick for dealing with funky padding of various elements:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
How about either of these solutions. They work on my browser:
<div id="container">
<div id="left"><span style="padding-left: 10px; padding-top: 10px">I want some padding here</span>
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
OR
<div id="container">
<div id="left"><div style="padding-left: 10px; padding-top: 10px">I want some padding here</div>
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
if border-box is not working then span should work for you, check this demo
CSS
#left > span {
padding:100px;
position:absolute;
height:100%;
border:1px solid #000;
}
HTML
<div id="left">
<span>I want some padding here</span>
<!-- rest of html -->
`
EDIT
Since, your #left has child divs inside, you can not apply padding option to it.
padding is required on text directly under #left id and not a child div,so, span is suggested as <span> is an inline element and <div> is block level element.
So here's my HTML:
...
<div class="header">
<div class="left">
</div>
<div class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</div>
<div class="right">
</div>
</div>
<!-- And the desired result is: -->
[ [LEFT] [CENTER] [RIGHT] ]
The only CSS I have is:
* {
margin: 0px;
}
img.logo {
display: block; margin-left: auto; margin-right: auto;
}
I really need help to align the three divs on the whole page. Also div.center must have the same size as the image, aka width - 800px and height - 600px.
It looks much more like a table than divisions to me...
<table class="header"><tr>
<td class="left"></td>
<td class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</td>
<td class="right"></td>
</tr></table>
Think about so CSS afterwards :
table.header{
width: 100%;
border-collapse: collapse;
}
table.header td{
vertical-align: top;
border: 1px solid #404040;
}
table.header td.center{
width: 800px;
height: 600px;
}
This is just a code sample, get the idea, and adapt to your own needs ^^
Add these classes to your css
.left
{
display:inline-block;
width:25%;
}
.center
{
display:inline-block;
width:50%;
}
.right
{
display:inline-block;
width:25%;
}
With the following markup, 2 solutions come to mind:
MARKUP
<div class="header">
<div class="left">
Some left test
</div>
<div class="center">
<img class="logo" src="http://placehold.it/50x50" />
</div>
<div class="right">
Some right text
</div>
</div>
Solution #1
Float left and right sides and use display-block on the center
FIDDLE
Css
.header
{
text-align: center;
width:100%;
}
.left
{
float:left
}
.right
{
float:right;
}
.center
{
display:inline-block;
}
Solution #2
Use text-align: justify; on the header element.
Then stretch the content to take up 100% width
FIDDLE
CSS
.header
{
text-align: justify;
width:100%;
}
.header > div
{
display: inline-block;
}
.header:after {
content: '';
display: inline-block;
width: 100%;
}
.left, .centre, .right {
float:left;
}
What float:left does is, is it'll make each container organize itself from the left, so you get:
[LEFT]-[CENTRE]-[RIGHT]
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.