I'm trying to do a top menu with a 1px border. How to have the #mid div use the full middle width (so that the bottom-border goes close to #right) ?
I'm looking for a solution without flex, without width: calc(...), because it's not supported on some devices I did tests on (legacy support needed).
* { margin:0; padding: 0; }
.left { float:left; width: 155px; height: 60px; border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; }
.mid { float:left; height: 60px; border-bottom: 1px solid #dedede; display:inline-block; }
.right { float: right; width: 40%; height: 60px; border-left: 1px solid #dedede; border-bottom: 1px solid #dedede; }
<div>
<div class="left">aa</div>
<div class="mid">aa</div>
<div class="right">bb</div>
</div>
the display:table layout properties can help you to start with : (=>IE8)
table shrinks/expands to hold content. that's why .mid will use as much space avalaible squizing others table-cell elements being less than the 100% width set in CSS. Mind that If content is wider than the tabled container, it will grow over the 100% width.
* { margin:0; padding: 0;box-sizing:border-box; }
.tb {
display:table;
width:100%;
border:solid 1px;
}
.tb > div {
display:table-cell;
border:inherit ;
}
.mid { width:100%; }
<div class="tb">
<div class="left">aa</div>
<div class="mid">aa</div>
<div class="right">bb</div>
</div>
<hr/>
<div class="tb">
<div class="left">longer</div>
<div class="mid">aa</div>
<div class="right">longer</div>
</div>
or float properties and block formating context :(to include IE6 add zoom:1; aside overflow)
.left and .right are to float and be first in the flow.
middle will come in between, BFC will avoid .mid to lay under floating elements.
div div {
border:solid 1px ;
overflow:hidden;/* modify BFC */
}
.left {
float:left;
}
.right {
float:right
}
<div >
<div class="left">aa</div>
<div class="right">bb</div>
<div class="mid">mid</div>
</div>
<hr/><div >
<div class="left">longer</div>
<div class="right">longer</div>
<div class="mid">mid</div>
</div>
Related
I have 2 div<> that I would like to be next to eachother. They are inside of a form<>. The one I have on the left won't float all the way up. It seems that my First Div keeps blocking it. I have resized it multiple times and It still doesn't work. Here is my Css code and as you can see there is not much to it. I also have no inline styling. My first Div is called ContactInput and my second Div is called invisible
#body {
border: 1px double black;
}
#checkout { //this is just a head at the top
text-align:left;
border-bottom: 1px solid black;
}
#contactInput{
clear:right;
padding:.5em;
}
#invisible{
float:right;
padding:.5em;
}
Like this?
#contact {
width: 50%;
padding:.5em;
background: blue;
float: left;
box-sizing: border-box;
}
#invisible {
width: 50%;
padding:.5em;
background: red;
float: left;
box-sizing: border-box;
}
<div id="contact">
</div>
<div id="invisible">
</div>
I recommend flex instead of float
.wrap {
display: flex;
}
#contact {
flex: 1;
padding:.5em;
background: blue;
}
#invisible {
flex: 1;
padding:.5em;
background: red;
}
<div class="wrap">
<div id="contact">
</div>
<div id="invisible">
</div>
</div>
I want to use the table-cell to make a two-col layout. the content in the inner table has no relationship with the outer table.
My problem is the menu in the left-col will keep in line with the content in the inner- table-cell(the inner-left-head and inner-right-head). How can I stop it?
.wrap {border: 1px solid #ddd;}
.left-col,
.right-col
{
display:table-cell;
}
.left-col {
border-right: 1px solid #ddd;
width:17.5%;
max-width:209px;
}
.right-col {width:2000px;}
.right-col-main {
margin: 30px;
border: 1px solid #ddd;
}
.inner-left-col,
.inner-right-col {
display: table-cell;
height:300px;
}
.inner-left-col {
width:100px;
border-right: 1px solid #ddd;
}
.inner-right-col {
width: 500px;
}
.inner-left-head,
.inner-right-head {
height:48px;
line-height:48px;
border-bottom: 1px solid #ddd;
}
<div class="wrap">
<div class="left-col">
<dl>
<dt>menu<dt>
<dd>sub1<dd>
<dd>sub2<dd>
<dd>sub3<dd>
</dl>
</div>
<div class="right-col">
<div class="right-col-main">
<div class="inner-left-col">
<div class="inner-left-head">left head</div>
<div class="inner-left-body">left body</div>
</div>
<div class="inner-right-col">
<div class="inner-right-head">right head</div>
<div class="inner-right-body">right body</div>
</div>
</div>
</div>
</div>
I tried use table-row to wrap the table-cell but I can't see any difference.
Thanks for editing. It's starting to become clear now. You want to be able to scroll the right column while keeping the left column in sight. Then my question is, why did you make this table layout?
I think you're looking for position: fixed to fixate the left column to the top left corner. You can position the right column by just giving it a left margin.
So the styling for the left and right columns becomes:
.left-col {
position: fixed;
width: 17.5%;
top: 0;
left: 0;
}
.right-col
{
margin-left: 17.5%; /* Same or larger as width of left colum */
height: 2000px; /* Force some height to see the effect.
}
.wrap {border: 1px solid #ddd;}
.left-col {
position: fixed;
width: 17.5%;
top: 0;
left: 0;
}
.right-col
{
margin-left: 17.5%; /* Same or larger as width of left colum */
height: 2000px; /* Force some height to see the effect.
}
.right-col-main {
margin: 30px;
border: 1px solid #ddd;
}
.inner-left-col,
.inner-right-col {
display: table-cell;
height:300px;
}
.inner-left-col {
width:100px;
border-right: 1px solid #ddd;
}
.inner-right-col {
width: 500px;
}
.inner-left-head,
.inner-right-head {
height:48px;
line-height:48px;
border-bottom: 1px solid #ddd;
}
<div class="wrap">
<div class="left-col">
<dl>
<dt>menu<dt>
<dd>sub1<dd>
<dd>sub2<dd>
<dd>sub3<dd>
</dl>
</div>
<div class="right-col">
<div class="right-col-main">
<div class="inner-left-col">
<div class="inner-left-head">left head</div>
<div class="inner-left-body">left body</div>
</div>
<div class="inner-right-col">
<div class="inner-right-head">right head</div>
<div class="inner-right-body">right body</div>
</div>
</div>
</div>
</div>
Instead of using table-cells you could use floats. Combined with relative width settings you will furthermore have a more responsive solution.
This is just one example how it could be working:
.left-col,
.right-col {
float:left;
}
.left-col {
background:#abc;
width:17.5%;
}
.right-col {
background:#aed;
width:82.5%;
}
.right-col-main {
margin-top:40px;
}
.inner-left-col,
.inner-right-col {
float:left;
}
.inner-left-col {
width:20%;
}
.inner-right-col {
width:80%;
}
http://jsfiddle.net/xn0zuo7h/
I have a side by side 50% divs. Under I have a content div where I have applied a margin-top 60px. That margin is not working.
<div class="sbs50">
Left Side
</div>
<div class="sbs50">
Right Side
</div>
<div class="content-section">
Content Section
</div>
Css
.sbs50
{
float: left;
width: 50%;
}
.content-section
{
margin-top: 60px;
border: 1px solid green;
}
I tried adding the following but is not working
.sbs50:after
{
content:'';
display:block;
clear: both;
}
How can I fix the margin not working?
Here is my fiddle
Just add the margin to the bottom of the sbs50 class and clear the floats for .content-section class. Like this:
.sbs50 {
float: left;
width: 50%;
margin-bottom:50px;
}
.content-section {
border: 1px solid green;
display:block;
clear: both;
float:none;
background:#ccc;
}
See fiddle
Alternative:
Use the typical clear method, basically you add a div which clears every float. So your HTML looks like this:
<div class="sbs50">Left Side</div>
<div class="sbs50">Right Side</div>
<div class="clearfix"></div><!-- added div -->
<div class="content-section">Content Section</div>
and your CSS like this:
.sbs50 {
float: left;
width: 50%;
}
.clearfix {
display:block;
clear: both;
float:none;
}
.content-section {
border: 1px solid green;
margin-top:200px;
background:#ccc;
}
See fiddle for this example
This is a more common approach since you simply clear elements and then style the subsequent elements as you wish, but you can use any of these approaches and they will work equally well
This works:
.content-section {
margin-top: 20px;
border: 1px solid green;
float: left;
width: 100%;
}
but I am not sure if you want to set the width yourself.
I've been trying to create a site with the following structure:
But I can't seem to get the header correct (e1 left, e2 centered, e3 right). I want the three elements e1, e2 and e3 to be left, middle and right positioned. This is what I'm trying:
<div id="wrapper">
<div id="header">
<div id="header-e1">
1
</div>
<div id="header-e2">
2
</div>
<div id="header-e3">
3
</div>
</div>
<div id="nav">
links
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
With this css:
#wrapper
{
width: 95%;
margin: 20px auto;
border: 1px solid black;
}
#header
{
margin: 5px;
}
#header-e1
{
float: left;
border: 1px solid black;
}
#header-e2
{
float: left;
border: 1px solid black;
}
#header-e3
{
border: 1px solid black;
}
#nav
{
margin: 5px;
}
#content
{
margin: 5px;
}
#footer
{
margin: 5px;
}
Can someone give me tips to what I can do? The structure is going to be used on a mobile website.
UPDATE
The code I have above gives me this:
But I want the 2 centered and the 3 on the right side. I don't want to set the width to a percent because the content in the elements may vary, meaning it may be 20/60/20 - 10/80/10 - 33/33/33 or something else.
Utilize the Magic of Overflow: Hidden
If you can swap the html position of 2 & 3 like so:
<div id="header-e1">
1 is wider
</div>
<div id="header-e3">
3 is also
</div>
<div id="header-e2">
2 conforms
</div>
Then you can set this css which will cause 2 to "fill" the available space because of the overlow: hidden on it. So if 1 & 3 expand, 2 narrows (shrink window down to see what happens at really small size).
#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}
Technically, you could keep your current html order and your float: left on both 1 & 2 and make 3 the flex div with overflow: hidden. You could do the same with 1 by reversing the order of the html completely and setting 2 & 3 to float: right with 1 having overflow: hidden. To me it would seem best to have the middle flex, but you know your application better than I.
If you are trying to make the site with a responsive width, you can try the following (33% is roughly one-third):
#header-e1 {
float: left;
width:33%;
border: 1px solid black;
}
#header-e2 {
float: left;
width:33%;
border: 1px solid black;
}
#header-e3 {
float: left;
width:33%;
border: 1px solid black;
}
You could also used fixed widths for the divs. If you want the further from each other you can play with their left/right margins etc. Hope that helps!
Here is an edit for no widths:
#wrapper {
position:relative; (add to wrapper)
}
#header-e1 {
position:absolute;
left:0;
border:1px solid black;
}
#header-e2 {
position:absolute;
left:50%;
border:1px solid black;
}
#header-e3 {
position:absolute;
right:0;
border: 1px solid black;
}
You need to give the divs in your header a width, and float header-e3 left.
Note: They all have the same CSS properties, so just give them the same class like .headerDivs and then you don't have repeating code
Edit: here is a working jsfiddle: http://jsfiddle.net/eNDPG/
I'm using a similar idea to what RevCocnept suggested with the width: 33%, except using display: inline-block instead of float: left. This is to avoid removing the div elements inside #header from the flow of the page and causing the height of #header to become zero.
#header > div {
display: inline-block;
width: 31%;
margin: 5px 1%;
}
Demo
You can do something like this:
HTML
<div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="center">Center</div>
</div>
CSS
#left {
float: left;
border: 1px solid red;
}
#right {
float: right;
border: 1px solid blue;
}
#center {
margin-left: 50px;
margin-right: 50px;
border: 1px solid green;
text-align: center;
}
The centered <div> must come as the last one in the HTML code.
Here's a JS Bin to test: http://jsbin.com/evagat/2/edit
<style type="text/css">
body {
margin:0;
}
#header {
width:100%;
**strong text**margin:auto;
height:10%;
background-color:red;
}
#left {
width:20%;
float:left;
#margin:auto auto auto auto;
height:100%;
background-color:blue;
}
#right {
float:right;
width:20%;
#margin:auto auto auto auto;
height:100%;
background-color:green;
}
#middle {
position:relative;
left:0;
right:0;
margin:auto;
height:80%;
background-color:yellow;
width:100%;
}
#middle1 {
width: 80%;
margin:auto;
height:45%;
background-color:black;
}
#middle2 {
width: 80%;
margin:auto;
height:40%;
background-color:brown;
}
#middle3 {
width: 80%;
margin:auto;
height:15%;
background-color:orange;
}
#midmain {
width: auto;
margin:auto;
height:100%;
background-color:white;
}
#footer {
width:100%;
margin:auto;
height:10%;
background-color:red;
}
</style>
now check comment for html design.
I have a header bar that spans horizontally across my web page, which is comprised of one div tag and three nested div tags.
HTML:
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="rightTop">
RIGHT
</div>
<div id="centerTop">
CENTER
</div>
</div>
CSS:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#leftTop
{
display: inline;
float: left;
}
#rightTop
{
display: inline;
float: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
}
And it works just great, except for the fact that the div tags are out of order in the HTML code, which I don't like. If I order the div tags by placing them Left, Center, and Right, in the HTML, then the Right div just disappears from the webpage! I'm guessing that it has something to do with the float and text-align attributes having a conflict.
Anyone have any ideas on what is going on here, or is there an easier way to do this in CSS?
Try float: left; on #centerTop or display: inline on all three without any floats.
This works fine, but it depends on what you need. If you dont know the height of the content and you want it to expand dynamicly, then this is not enough:
#leftTop
{
float: left;
}
#rightTop
{
float: right;
}
#centerTop
{
float:left;
text-align: center;
}
I just tested the code from the original post in Firefox 3.0.10, Opera 9.64, IE8 and Google Chrome 2.0.181.1
All browsers showed all 3 divs, not a single div fell off the screen... Are you perhaps using IE6?
I am running your HTML and CSS of FF 3.0.10.
When you re-arrange the CENTERTOP div to be between the LEFTOP and RIGHTTOP divs, the RIGHTTOP div doesn't fall 'off the page' but the "RIGHT" text just falls off onto the next line.
My solution is proposed below (you'll notice I have some additions and some best-practice techniques).
HTML CODE:
<html>
<head>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
<div class="clearer">
</div>
<div id="randomContent">
RANDOM CONTENT
</div>
</body>
CSS CODE:
#top-bar {
margin: 0;
font-family: Arial;
}
#leftTop {
float: left;
width: 20%;
border: 1px solid red;
}
#centerTop {
float: left;
width: 20%;
border: 1px solid blue;
}
#rightTop {
border: 1px solid green;
}
.clearer {
clear: both;
}
#randomContent {
background-color: yellow;
}
So you'll notice in the HTML that the divs are arranged in order from LEFT to CENTRE to RIGHT. In this CSS, this has been reflected by floating the LEFTTOP and CENTRETOP divs left. You will also notice that I have specified a width property on the LEFTTOP and the CENTERTOP divs, to enable you to space out your divs as wide as you want. (You'll be able to visually see your width modifications as I've added in a border on the divs). No width percentage property has been applied on the RIGHTTOP div as it will consume the remaining 60% of the width (after the LEFTTOP and CENTRETOP have consumed the 40%).
I have also added a CLEARER div. Think of the CLEARER div is a horizontal line break. Essentially it acts as a line of demarcations to separate the floated divs from the content below.
You can then add whatever content you want in the RANDOMCONTENT div.
Hope this helps :)
I don't know that it disappears, but it would drop down a line. Lot's of websites put it out of order for that reason (I know I do).
Another alternative:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#top-bar>div
{
float: left;
width: 33%;
}
#rightTop
{
text-align: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
width: 34%;
}
And then put <br style="clear:both"/> right before you close your top-bar div.
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
<br style="clear:both"/>
</div>
Not sure if you want the width's defined like this, however.
Another solution:
Set the leftTop, centerTop, and rightTop to display:table-cell,
Set the top-bar to display:table-row,
Set a container to display:table
Set the width of the container and row (#table-bar) to 100%;
Set the width of the columns to the desired ratios (e.g., 25% for left and right, 50% for center)
caveat: table, table-row, and table-cell css display values do not work in IE 5.5 or 6 (and maybe Opera 8); but they do work nicely in all contemporary browsers. IE conditionals can be used to split code for IE > 5 and IE < 7.
TEST:
<html>
<head>
<title>3 Column Header Test</title>
<style type="text/css">
body#abod {
background-color:#F5ECBD;
color:#000;
}
#hdrrow {
margin:0;
padding:0;
width:100%;
border:1px solid #0C5E8D;
display:table;
}
#top-bar {
margin:0;
padding:1px 4px;
width:100%;
font-size:100%;
background-color:orange;/*#005555;*/
font-family: Arial;
border:1px solid #000;
display:table-row;
}
#leftTop {
margin:0;
padding:0 16px;
width:24%;
text-align:left;
color:#000;
background-color:#F0DD80;
border:1px dashed #f00;
display:table-cell;
}
#centerTop {
margin:0;
padding:0 16px;
width:40%;
margin:0 auto;
text-align:center;
color:#000;
background-color:#F5ECBD;
border:1px dashed #f00;
display:table-cell;
}
#rightTop {
margin:0;
padding:0 16px;
width:24%;
text-align:right;
color:#000;
background-color:/*#F0DD80;*/transparent;
/*shows the orange row color*/
border:1px dashed #f00;
display:table-cell;
}
#footer {
padding:25px;
color:#000;
background-color:#F5ECBD;
}
</style>
</head>
<body id="abod">
<div id="hdrrow">
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
</div>
<h4 id="footer">Footer Lorem ipsum dolor sit amet</h4>
</body>
</html>
Use relative positioning to swap the positions of the divs after they have been floated:
The HTML
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
The CSS
#leftTop {
width:33%;
float:left;
}
#centerTop {
width:33%;
float:right;
position:relative;
right:33%;
}
#rightTop {
width:33%;
float:right;
position:relative;
left:33%;
}
I use the same process in my Perfect Liquid Layouts to change the column source ordering.