I feel like this is such an idiotic question, and the little things in css always get me. Anyway, I have a design, and I'm trying to do 2 columns. One (which is a sidebar of 300px) which is at the right, and the other column should fill the remaining space.
As you can see the sidebar is put under the div on the left.
HTML:
<div class="wfix"><div class="col-fix">
<div class="col-lg">
<!--
<div id="block">
<bh>Homepage</bh>
<detail id="test">Loading...</detail>
</div>
-->
</div>
<div class="col-side">
</div>
</div></div>
CSS:
.wfix{ margin-left: 5em; margin-right: 5em; }
.col-fix {
display: table;
width: 100%;
table-layout: fixed;
}
.col-lg, .col-side {
color: #999;
margin: 0;
padding: 0;
}
.col-lg {
margin-left: 0;
margin-right: 300px;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: blue;
min-height: 500px;
}
.col-side {
width: 300px;
float: right;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: red;
min-height: 500px;
}
thanks for any help, Jake.
Floating elements should appear first in the html:
<div class="wfix">
<div class="col-fix">
<div class="col-side"></div>
<div class="col-lg"></div>
</div>
</div>
Demo
Related
I am trying to solve this layout puzzle but am stuck in how to get it as elegant, clean and timeless.
Given:
- a horizontal line of 1 pixel height stretching inside the container its in
- a vertically as well as horitontally centered box over this line
- a left aligned textbox
- and a right aligned text box
What I have tried, is painstackingly increment the percengates untill I reached some kind of a middle... warning, disclaimer, the following code is very graphical and ugly!
CSS
author{color: grey}
box{float: left;
background: blue;
margin: 0 0 0 46.4%;
...
/* bad coding feel embarrassed showing this */
}
time{color: grey}
HTML (flexible and please change if needed)
<author></author>
<box><img src=""/></box>
<time></time>
I first thought this might be solved in flexbox, using justify-content: space-between however, I cannot figure out how to make the line appear there. So I am open for any suggestions wether its the good old positioning/float or with flexbox. Maybe it would be nice to try to solve it both ways and see which one is the most elegant? Thanks in advance!
Here is one way to accomplish that, where you use justify-content: space-between to align the author/box/date and an absolute positioned pseudo element to draw the line
#wrapper {
position: relative;
display: flex;
justify-content: space-between;
}
#wrapper::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%; height: 1px;
background: gray;
}
#wrapper > * {
position: relative; /* instead of 'z-index: -1' on the pseudo so
the line stays below the items */
}
#author {}
#date {}
#box {
width: 50px;
height: 50px;
background: blue;
}
<div id="wrapper">
<div id="author">
Author
</div>
<div id="box">
</div>
<div id="date">
Date
</div>
</div>
Updated based on a comment
The #wrapper > * rule can in this case be replaced with setting position: relative on the box, which I recommend in favor of giving it a z-index.
Updated based on a 2nd comment
As you have issues with the combo Flexbox/script, here is one version without, with the same markup and an almost as short CSS
#wrapper {
position: relative;
}
#wrapper::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%; height: 1px;
background: gray;
}
#author {
position: absolute;
top: 0;
left: 0;
}
#date {
position: absolute;
top: 0;
right: 0;
}
#box {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
background: blue;
}
<div id="wrapper">
<div id="author">
Author
</div>
<div id="box">
</div>
<div id="date">
Date
</div>
</div>
I think the below snippet provides a framework to do what you want to do. This uses flex boxes to hold three columns of divs (the left, the right, and the square). By setting the width of the square, the other two elements in the flex will fill the space. Left and right align settings are set in paragraph elements within divs.
This is by no means a very tidy solution, but does show how it can be done.
.column {
display: block;
width: 150px;
}
.square {
display: inline;
width: 30px;
height: 30px;
margin: auto 0;
background: blue;
}
.top {
display: block;
height: 50%;
border-bottom: solid black 2px;
}
.bottom {
display: block;
height: 50%;
}
.banner {
display: flex;
padding: 5px;
}
p {
margin: 0;
line-height: 15px;
font-size: 0.8em;
}
.left-text {
text-align: left;
}
.right-text {
text-align: right;
}
<div class="banner">
<div class="column left">
<div class="top left">
<p class="left-text">
Author
</p>
</div>
<div class="bottom left">
</div>
</div>
<div class="square">
</div>
<div class="column right">
<div class="top right">
<p class="right-text">
Month Year
</p>
</div>
<div class="bottom right">
</div>
</div>
</div>
Try something like this. Fiddle
#line{background: #000; height:1px; margin-top:40px;}
.alignleft {
float: left;
text-align:left;
width:33.33333%;
}
.aligncenter {
float: left;
text-align:center;
width:33.33333%;
}
.alignright {
float: left;
text-align:right;
width:33.33333%;
}
.box{background:blue;margin:auto;width:40px;height:40px;display:block;margin-top:-20px;}
<div id="line">
<p class="alignleft">Author</p>
<div class="aligncenter"><div class="box">
</div></div>
<p class="alignright">month/year</p>
</div>
<div style="clear: both;"></div>
beginning from a layout to two column where column-left was fixed and column-right was liquid i have need to add a third column of widht fixed. I have this code:
<did id="#container">
<div id="#col1"> left fixed 15em </div>
<div id="#col2"> center liquid </div>
<div id="#col3"> right fixed 15em </div>
</div>
With this css:
#container {
background-color: #ffffff;
height: auto;
overflow: hidden;
}
#col1 {
float: left;
margin: 1em;
padding: 0.5em;
width: 15em;
}
#col2 {
float: none;
width: auto;
overflow: hidden;
margin: 1em;
padding: 0.5em;
}
#col3 {
float: right;
margin: 1em;
padding: 0.5em;
width: 15em;
}
The result is that third column it is located below the second column to right. How i can fix this problem?
The final result should to be a layout to three column where left and right column are fixed and central column is liquid.
Thank very much.
I like to use CSS tables for these layouts:
Note that you shouldn't use # in the id attribute.
#container {
width: 100%;
display: table;
}
#container>div {
display: table-cell;
}
#col1 {
background: lightblue;
padding: 0.5em;
width: 15em;
}
#col2 {
background: lightyellow;
padding: 0.5em;
}
#col3 {
background: lightgreen;
padding: 0.5em;
width: 15em;
}
<div id="container">
<div id="col1"> left fixed 15em </div>
<div id="col2"> center liquid </div>
<div id="col3"> right fixed 15em </div>
</div>
This is what flex boxes were invented for:
#container {
display: flex;
}
#col2 {
flex: 1;
}
#col1,
#col3 {
flex: 0 0 15em;
}
<did id="container">
<div id="col1">left fixed 15em</div>
<div id="col2">center liquid</div>
<div id="col3">right fixed 15em</div>
</div>
Extra Info: This is a very old web layout problem (called the "Holy Grail" of Layouts), see this article for a complete description. Also, see Mozilla's Using Flexible Boxes.
Note: In id properties don't include the # (that's used when selecting by id)
First of all, your html is invalid :
did should be div
id="..." should not contains #
HTML updated:
<div id="container">
<div id="col1"> left fixed 15em </div>
<div id="col2"> center liquid </div>
<div id="col3"> right fixed 15em </div>
</div>
For the CSS, you can change your rule #col2 float: none to float: left
JSFIDDLE: http://jsfiddle.net/ghorg12110/5p175fms/
You could try the following:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Three column layout</title>
<style>
body { margin: 0; overflow: hidden }
#V { position: absolute; top: 1em; left: 1em; width: 15em; border: 1px solid red; padding: .5em }
#W { position: absolute; top: 1em; right: 1em; bottom: 0; left: 1em; margin: 0 17em }
#X { border: 1px solid blue; padding: .5em }
#Y { position: absolute; top: 1em; right: 1em; width: 15em; border: 1px solid green; padding: .5em }
</style>
<div id=V>
Left content
</div>
<div id=W>
<div id=X>
Middle content
</div>
</div>
<div id=Y>
Right content
</div>
Im using a set of layers, with this CSS
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.eventCat {
float: right;
width: 5px;
height: 100px;
}
to make inline divs. however, when i add a layer that i wish to be align to the right, it seems to fall below (the green one .eventCat). It should be at the right hand side of the red box! even with float:right; what am i missing?
I made a fiddle.. http://jsfiddle.net/7GBca/ to fiddle with :)
It is not floating correctly because .float2 is not floted, my guess is you want it to expand to fill all available width and that's why you didn't set an explicit width. One solution to align .eventCat correctly would be to use position:absolute; and use right:0;
.wrapper {
position: relative;
}
.eventCat {
position: absolute;
right: 0;
top: 0;
width: 5px;
height: 100%;
}
.left2 {
padding-right: 5px; /*set this to the width of .eventCat so it does not overlap*/
}
Example fiddle
you are missing "width: ...px" and "float: left" of 'left2' and "width: ...px" of 'wrapper'.
The easiest way to fix this is set a negative top margin to your green div:
.eventCat {
margin: -100px 0 0 0;
float: right;
width: 5px;
height: 100px;
}
Example Fiddle
Your issue is fixed, please check the code here:
<style type="text/css">
.eventCat {
float: right;
width: 5px;
height: 100px;
}
.eventIMG {
float: left;
left: 0;
width: 100px;
height: 100px;
}
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.set:hover {
background-color: #FFDEAD;
cursor: pointer;
cursor: hand;
}
#event.title {
font-size: 21px;
font-weight: bold;
color: black;
text-decoration: none;
}
#event {
color: black;
}
</style>
and here is your HTML
<div class="wrapper">
<div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
<div class="left1">
<div style="text-transform: uppercase;">WED 18.09</div>
<div style="text-transform: uppercase;">kl.22.00</div>
</div>
<div class="eventCat" style="background-color:green;"></div>
<div class="left2" id="event">
<div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
<div></div>
<div class="">
<p>something here</p>
Find out more » </div>
</div>
</div>
<div class="wrapper">
<div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
<div class="left1">
<div style="text-transform: uppercase;">WED 18.09</div>
<div style="text-transform: uppercase;">kl.22.00</div>
</div>
<div class="eventCat" style="background-color:green;"></div>
<div class="left2" id="event">
<div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
<div></div>
<div class="">
<p>something here</p>
Find out more » </div>
</div>
</div>
What you have to do there is to replace you div.eventCat with div.left2 that's it :-)
Fiddle : http://jsfiddle.net/KRU9U/
Cheers
Put the eventCat (the element you want to float to the right) as the first element under wrapper.
What I want to do is have a <div> with a container class and a fixed width, holding a <div> with the block class to prevent other content encroaching on any uneven blank space, then two columns (<div>'s) side-by-side inside the block, and to be 50% of the width of the block.
When I create this, I get what appears to be a margin after the first block, which I do not want. I want the block to pack up tight, no margins.
I have an example here of what I have so far, and here if the code:
<html>
<head>
<title>Columns</title>
<style>
div {
margin: 0;
padding: 0;
}
.container {
background: #DDD;
width: 1200px;
margin: 0 auto;
padding: 2% 0;
}
.block {
background: #555;
width: 100%;
display: block;
}
.col {
width: 49%;
display: inline-block;
background: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
</div>
</div>
</body>
</html>
Your problem is being causes by inline-block, using this makes a space appear inbetween.
Try using float:left to get around this:
See on jsFiddle
.col {
width: 50%;
float: left;
box-sizing: border-box;
background: #333;
}
Note that I added, box-sizing:border-box; this means when you use padding it will be included in the width, not on top of it. Effectively enabling the use of it without an extra inner div.
Remember to include a clear fix afterwards also to "clear" the floats.
CSS
.clear {
clear:both;
}
HTML
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
<div class="clear"></div>
</div>
Try replacing these classes:
.block {
background: none repeat scroll 0 0 #555555;
display: block;
overflow: auto;
width: 100%;
}
.col {
width: 49%;
float: left;
background: #333;
}
.container {
background: #DDD;
width: 900px;
margin: 0 auto;
padding: 30px 30px 30px 30px;
}
.block {
background: #555;
width: 100%;
display: block;
}
.block:after {
content: "";
display: table;
clear: both;
}
.col {
width: 50%;
float: left;
background: #333;
}
I have a container layer with a width of 850px. Inside of that i have 4 layers displayed as inline-blocks floating left, each of which are 100px high and 200px wide.
How can i space them so the outside ones line up at the edges of the container div but are spaced evenly within?
css
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background-color: #09F;
}
html
<div id=content>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
It's not really going to work, because you have a container that's 850px wide and you're trying to spread 4 200px wide containers with three gutters between them. 4*200 = 800 so you have 50px spread in which to split 3 gutters 50/3 is 16.6666ish which isn't going to work for pixels.
The following works, but I don't know how useful it is for you.
#content {
width: 848px;
margin-right: auto;
margin-left: auto;
background: #666;
overflow: hidden;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
#featured.first { margin-left: 0px;}
<div id=content>
<div id=featured class="first"></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
There are a couple of ways to do this. One cross-browser solution I have found is to use an extra wrapper div and get creative with it's true dimensions and negative margins.
<div id="content">
<div class="kludge">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>
</div>
I changed id=featured to a class name because ids should be unique if you want your HTML to be valid.
The CSS:
#content {
width: 850px;
margin: 0 auto; /* short-hand for margin, first value is top+bottom, second value is left+right */
overflow: hidden; /* not actually necessary but will make #container contain the floated items */
}
.kludge {
width: 900px; /* create room for the right hand margin of last item */
margin-right: -50px;
}
.featured {
display: block; /* inline-block not necessary for floated elements */
height: 100px;
width: 200px;
float: left;
margin: 0 10px;
background-color: #09F;
}
I think the easiest way is:
<style>
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
border:1px solid #000
}
#featured1 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 0px;
margin-top: 10px;
background-color: #09F;
}
#featured2 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
</style>
</head>
<body>
<div id=content>
<div id=featured1></div>
<div id=featured2></div>
<div id=featured2></div>
<div id=featured2></div>
</div>
Maybe not what you need, but If IE6 support is not important pseudo selectors are perfect for this, and avoid any HTML fudges (tested in IE7, FF3.5):
CSS:
#content {
width: 848px;
margin: 0 auto;
overflow: auto;
}
.featured {
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
.featured:first-child {
margin-left: 0;
}
HTML:
<div id="content">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>