I'm trying to code more "responsive" after reading Ethan Marcote's A Book Apart.
I have come up with a case which I'm not sure how to solve. In a li element, I have four different divs. The first one cannot change width or height (I know this isn't responsive but the image size must remain the same within it). The other three divs can stretch as they are just text.
Now, I know I can set the divs to have different percentages of their parent width, which is fine, except for the fact that div1 HAS to be a defined pixel width. This throws out the calculations for the other percentages (browser width - 77px is going to be a different number for different browser sizes), so what shall I do?
I've whipped up this to help illustrate my problem.
As I mention, I realise I can use JS to set a container div's width on document load and resize but that seems, well, not so great.
Thanks for any help :)
Maybe table somethings can help
<!DOCTYPE html>
<html>
<head>
<style>
li { display: table; clear: both; width: 100% }
li div { display: table-cell; border: 1px solid blue; height: 1em }
.div1 { min-width: 65px; max-width: 65px }
.div2 { width: 60% }
.div3 { width: 10% }
.div4 { width: 30% }
</style>
</head>
<body>
<ul>
<li>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</li>
<li>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</li>
</ul>
</body>
</html>
#garthen; As i understand your question is that you want one div have fixed width & other have dynamic widths. I did that by change the order of the divs
CSS:
li {overflow:hidden}
li div {border: 1px solid blue;}
.div1 { width:65px;float:left; background:red;}
.div2 {overflow:hidden; background:yellow;}
.div3 { width: 10%; float:right; background:green;}
.div4 { width: 30% ;float:right; background:pink;}
HTML:
<ul>
<li>
<div class="div1">1</div>
<div class="div4">4</div>
<div class="div3">3</div>
<div class="div2">2</div>
</li>
<li>
<div class="div1">1</div>
<div class="div4">4</div>
<div class="div3">3</div>
<div class="div2">2</div>
</li>
</ul>
may be that's you want & it's also work IE also. If you want to give your 3rd & 4th div fixed width then also works well.
Check the demo for more http://jsfiddle.net/sandeep/4RPFa/67/
Related
Having a menu like this (emphasized by a red rectangle)...
how can I (in pure CSS) make this responsive so that, if there is not enough width available, the menu turns into a drop-down list (or anyway something smaller).
The question is not about implementing the drop-down list itself, but how to switch from one content to the other depending on available space.
I know this is rather simple when using #media max-width queries, but the problem is that I do not know the actual with of the menu items at "design time" - especially because the text gets translated and/or changed, leading to different widths depending on the actual language displayed.
Perhaps, there is some CSS trick that makes a whole "text" line / content disappear if it does not fit the parent container?
Here's a solution I've just come up with that should do the job. I added some style to make the structure more evident but it's not pixel perfect, you'll have to take care of that. Run the snippet in full screen and resize the window to see it in action.
.table-row{
display: table-row;
}
.table-cell{
display: table-cell;
vertical-align: middle;
white-space: nowrap;
}
.wrapper{
height:75px; /*the height of your menu, it's critical to define this value equal to the horizontal menu height*/
overflow:hidden; /*this will hide the horizontal menu when the screen width is too small*/
}
.top_nav{
padding-right:120px; /*allow space for right section*/
background-color: green;
color:white;
}
.top_nav_background{ /* this serves as a background for the rest of the structure, pay attention if you have other z-indexed elements */
background-color:green;
height:85px;
width:100%;
position:absolute;
top:0px;
z-index:-1;
}
.floating-box {
height: 55px;
padding:10px;
float: left;
border: 1px solid #73AD21;
background-color:green;
}
.h-menu{
height: 75px;
float: left;
min-width: 150px;
background-color:yellow;
}
.h-menu-item{
height: 55px;
padding:10px;
border: 1px solid #73AD21;
}
.v-menu{
margin-top:20px;
height: 20px;
background-color:red;
}
.right-items{
position:absolute;
right:20px;
top:20px;
color:white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="top_nav_background"></div>
<div class="top_nav table-cell">
<div class="wrapper">
<div class="floating-box">Left section.</div>
<div class="h-menu table-row">
<div class="table-cell h-menu-item">item1</div>
<div class="table-cell h-menu-item">item2</div>
<div class="table-cell h-menu-item">item3</div>
<div class="table-cell h-menu-item">long long long item4</div>
</div>
<div class="v-menu">v-menu</div>
</div>
<div class="table-cell right-items">Right section.</div>
</div>
</body>
</html>
In one project I did I came up with a solution where you show part or all of the menu and only show it as a dropdown/side-menu when the screen gets smaller.
The sub-menu is optional and you can just use the main menu for your effect.
http://codepen.io/anon/pen/LRJoEB
<nav id="top-menu">
<ul>
<li class="link menu" tabindex="0">
Menu
</li>
<li class="link">
<a class="help" href="#">Help</a>
</li>
<li class="link">
<a class="account" href="#">My Account</a>
</li>
<li class="sub-nav">
<nav id="sub-menu">
<ul>
<li class="sub-link">
<a class="details" href="#">My Details</a>
</li>
</ul>
<div id="close-menu" tabindex="0"></div>
</nav>
</li>
</ul>
</nav>
Just change the bits and parts to fit your needs, should you get stuck just leave a comment ;)
edit
Just realised you don't want to be using any media queries. I'll see if I can come up with something in that direction, not off the top of my head.
I warned you, I can be a little vague
Anyway, what I am after are those pages that fill the whole screen, but if you scroll down and you come to a different section ( some specific content or just a footer), it breaks away from the previous content by having a different background.
Sorry, if I sleep on it, I can maybe come up whith a better explanation and/or an example page.
Does that style have a name and how is it done? If it needs to be responsive?
thanks
Yes. It's simple to do. Setup like so, and customize to your heart's content.
<div id="header" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="feature_area" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="content" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="footer" class="container">
<div class="wrapper">
[...]
</div>
</div>
CSS:
.container {
width: 100%;
text-align: center;
}
.wrapper {
margin: 0px auto;
width: 70%;
text-align: left;
}
The parent (container) <div>s will stretch to 100% page width. The child (wrapper) <div>s will stretch to 70% of their parents (or, you can set this to fixed pixel dimensions and change based upon screen dimensions) and will be centered. You apply decorative backgrounds to the parent .container like:
#header {
background: #ff0000;
}
#footer {
background: #000;
}
#content {
background: url(img/bg_pattern.gif);
}
#feature_area {
background: url(img/hero_feature_img.jpg) top center no-repeat;
}
How would i make my middle div take the remaining space left in width, but still staying in its place beside the 2 other divs?
Also if i remove either of the 2 divs on the sides, the main div should just take what space there is left?
Code:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
http://jsfiddle.net/U3Hr5/2/
My suggestion is using a table since you want all of them to be on the same row but with their own heights.
Html:
<div class="row-fluid">
<table style="width: 100%">
<tr>
<td class="sidebar">1</td>
<td class="content-box">2</td>
<td class="sidebar">3</td>
</tr>
</table>
Css:
.sidebar {
width:225px;
background-color:blue;
}
.content-box {
background-color:red;
}
Here is the fiddle edit:
http://jsfiddle.net/mDpEX/
//Flipbed
If you don't want to use table for layout, you can make use of css3 display table, table-cell properties,
#container {
display: table;
width: 100%;
}
#left, #middle, #right {
display: table-cell;
height: 100px;
}
#left, #right {
width: 150px;
background: green;
}
#middle {
background: gray;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
jsfiddle
More on css display properties
I assume you want something like this.
The HTML:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
The CSS:
.sidebar {
float:left;
width:225px;
background-color:blue;
}
.content-box {
clear:left;
background-color:red;
width:225px;
}
Hope this helps.
Actually i didn't get your question correctly. If you are looking to align your div on to the remaining space after your first div ie after sidebar div simply put width of content-box as 50%(or the size you want).
It depends upon how much you want the layout to respond to resizing without using JavaScript and what browsers you're trying to cater for. If your layout is essentially static and you just want to respond to width changes then you can use something like this.
http://jsfiddle.net/U3Hr5/4/
HTML
<div class="row-fluid">
<div class="span12">
<div class="left sidebar">1</div>
<div class="content-box">2</div>
<div class="right sidebar">3</div>
</div>
</div>
CSS
.span12 {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
width: 225px;
background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
margin-left: 225px;
margin-right: 225px;
background-color:red;
}
You can try something like this http://jsfiddle.net/kKGVr/
Basically, if you don't wrap the content in a containing div it will expand to fill the available space - you can test this by removing the divs called #left or #right. This will also allow you to add a footer because no absolute positioning is used.
It will fall down, however, if the central column becomes longer than the side columns... solution? Not sure, perhaps use javascript to adjust the height of the side columns so they are always at least as long as the central column.
HTML:
<div id="wrapper">
<div id="right">...</div>
<div id="left">...</div>
content here
</div>
and CSS:
#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}
I've searched high and low and cannot find a solution specific to this problem. I'm trying to accomplish the following:
Have a container DIV defined with a percentage height to serve as max-size container
A secondary container DIV that provides a content size-based borde
Have a header div that is fixed at the top of that DIV
Have a list of DIVs (table-like) under the header
When the list is short, the border is reduced to size of content
When list if long (> height of outer container), scrollbar is shown for DIV list and not header.
I put together the following simplified version:
<html>
<head>
<style type="text/css">
.panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; }
.header { border-bottom: 1px solid black; }
.scroll { max-height: 100%; overflow: auto; }
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
The two red boxes should be fixed size. Check
The blue box should size to be the size of the content or size of red box maximum. Check
When contents in lower exceed red box size, scrollbar should be displayed under header. Fail
Any change I make that gets the scrollbar displayed causes the top blue box to enlarge to the size of it's container, red box. e.g., { .scroll height: 100% }
(The DIV.wrap does have a purpose - just not in this example. It is intended to provide a double-border effect on the sizer, so it should be the same size as sizer all the time).
Also, I have figured out some solutions where I used fixed (px) sizes for the DIVs, but this is not necessarily desired. Especially on DIV.panel - this must be set to a percentage height.
Not completely sure i understand the question, but if you want the scroll on the list but not on the header, have you tried:
overflow-y:scroll;
on the "scroll" div instead of
overflow:auto?
Let me know
Ok i think maybe i worked it out. I think cause you have overflow:hidden and a height on the container div, and not the variable scroll div. Just try the code below and let me know. I have added the height of 10% to the scroll div and not the overall container. Hope thats what you were looking for
<html>
<head>
<style type="text/css">
.panel { border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; display:block;}
.header { border-bottom: 1px solid black; }
.scroll { height: 10%;overflow-y: scroll; display:block; }
.scroll div {display:block; line-height:normal; clear:both; height:20px;}
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm looking for a super easy method to create a two column format to display some data on a webpage. How can i achieve the same format as:
<table>
<tr>
<td>AAA</td>
<td>BBB</td>
</tr>
</table>
I'm open to HTML5 / CSS3 techniques as well.
<style type="text/css">
#wrap {
width:600px;
margin:0 auto;
}
#left_col {
float:left;
width:300px;
}
#right_col {
float:right;
width:300px;
}
</style>
<div id="wrap">
<div id="left_col">
...
</div>
<div id="right_col">
...
</div>
</div>
Make sure that the sum of the colum-widths equals the wrap width. Alternatively you can use percentage values for the width as well.
For more info on basic layout techniques using CSS have a look at this tutorial
Well, you can do css tables instead of html tables. This keeps your html semantically correct, but allows you to use tables for layout purposes.
This seems to make more sense than using float hacks.
#content-wrapper{
display:table;
}
#content{
display:table-row;
}
#content>div{
display:table-cell
}
/*adding some extras for demo purposes*/
#content-wrapper{
width:100%;
height:100%;
top:0px;
left:0px;
position:absolute;
}
#nav{
width:100px;
background:yellow;
}
#body{
background:blue;
}
<div id="content-wrapper">
<div id="content">
<div id="nav">
Left hand content
</div>
<div id="body">
Right hand content
</div>
</div>
</div>
I know this question has already been answered, but having dealt with layout a fair bit, I wanted to add an alternative answer that solves a few traditional problems with floating elements...
You can see the updated example in action here.
http://jsfiddle.net/Sohnee/EMaDB/1/
It makes no difference whether you are using HTML 4.01 or HTML5 with semantic elements (you will need to declare the left and right containers as display:block if they aren't already).
CSS
.left {
background-color: Red;
float: left;
width: 50%;
}
.right {
background-color: Aqua;
margin-left: 50%;
}
HTML
<div class="left">
<p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
<ul>
<li>The columns are in the right order semantically</li>
<li>You don't have to float both columns</li>
<li>You don't get any odd wrapping behaviour</li>
<li>The columns are fluid to the available page...</li>
<li>They don't have to be fluid to the available page - but any container!</li>
</ul>
</div>
There is also a rather neat (albeit newer) addition to CSS that allows you to layout content into columns without all this playing around with divs:
column-count: 2;
There's now a much simpler solution than when this question was originally asked, five years ago. A CSS Flexbox makes the two column layout originally asked for easy. This is the bare bones equivalent of the table in the original question:
<div style="display: flex">
<div>AAA</div>
<div>BBB</div>
</div>
One of the nice things about a Flexbox is that it lets you easily specify how child elements should shrink and grow to adjust to the container size. I will expand on the above example to make the box the full width of the page, make the left column a minimum of 75px wide, and grow the right column to capture the leftover space. I will also pull the style into its own proper block, assign some background colors so that the columns are apparent, and add legacy Flex support for some older browsers.
<style type="text/css">
.flexbox {
display: -ms-flex;
display: -webkit-flex;
display: flex;
width: 100%;
}
.left {
background: #a0ffa0;
min-width: 75px;
flex-grow: 0;
}
.right {
background: #a0a0ff;
flex-grow: 1;
}
</style>
...
<div class="flexbox">
<div class="left">AAA</div>
<div class="right">BBB</div>
</div>
Flex is relatively new, and so if you're stuck having to support IE 8 and IE 9 you can't use it. However, as of this writing, http://caniuse.com/#feat=flexbox indicates at least partial support by browsers used by 94.04% of the market.
Well, if you want the super easiest method, just put
<div class="left">left</div>
<div class="right">right</div>
.left {
float: left;
}
though you may need more than that depending on what other layout requirements you have.
All the previous answers only provide a hard-coded location of where the first column ends and the second column starts. I would have expected that this is not required or even not wanted.
Recent CSS versions know about an attribute called columns which makes column based layouts super easy. For older browsers you need to include -moz-columns and -webkit-columns, too.
Here's a very simple example which creates up to three columns if each of them has at least 200 pixes width, otherwise less columns are used:
<html>
<head>
<title>CSS based columns</title>
</head>
<body>
<h1>CSS based columns</h1>
<ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
<li>Item six</li>
<li>Item eight</li>
<li>Item nine</li>
<li>Item ten</li>
<li>Item eleven</li>
<li>Item twelve</li>
<li>Item thirteen</li>
</ul>
</body>
</html>
If you want to do it the HTML5 way (this particular code works better for things like blogs, where <article> is used multiple times, once for each blog entry teaser; ultimately, the elements themselves don't matter much, it's the styling and element placement that will get you your desired results):
<style type="text/css">
article {
float: left;
width: 500px;
}
aside {
float: right;
width: 200px;
}
#wrap {
width: 700px;
margin: 0 auto;
}
</style>
<div id="wrap">
<article>
Main content here
</article>
<aside>
Sidebar stuff here
</aside>
</div>
I know this is an old post, but figured I'd add my two penneth. How about the seldom used and oft' forgot Description list? With a simple bit of css you can get a really clean markup.
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
take a look at this example http://codepen.io/butlerps/pen/wGmXPL
You can create text columns with CSS Multiple Columns property. You don't need any table or multiple divs.
HTML
<div class="column">
<!-- paragraph text comes here -->
</div>
CSS
.column {
column-count: 2;
column-gap: 40px;
}
Read more about CSS Multiple Columns at https://www.w3schools.com/css/css3_multiple_columns.asp
This code not only allows you to add two columns, it allows you to add as many coloumns as you want and align them left or right, change colors, add links etc. Check out the Fiddle link also
Fiddle Link : http://jsfiddle.net/eguFN/
<div class="menu">
<ul class="menuUl">
<li class="menuli">Cadastro</li>
<li class="menuli">Funcionamento</li>
<li class="menuli">Regulamento</li>
<li class="menuli">Contato</li>
</ul>
</div>
Css is as follows
.menu {
font-family:arial;
color:#000000;
font-size:12px;
text-align: left;
margin-top:35px;
}
.menu a{
color:#000000
}
.menuUl {
list-style: none outside none;
height: 34px;
}
.menuUl > li {
display:inline-block;
line-height: 33px;
margin-right: 45px;
}
<div id"content">
<div id"contentLeft"></div>
<div id"contentRight"></div>
</div>
#content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
#contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
#contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
}
Obviously you will need to adjust the size of the columns to suit your site as well as colours etc but that should do it. You also need to make sure that your ContentLeft and ContentRight widths do not exceed the Contents width (including margins).
a few small changes to make it responsive
<style type="text/css">
#wrap {
width: 100%;
margin: 0 auto;
display: table;
}
#left_col {
float:left;
width:50%;
}
#right_col {
float:right;
width:50%;
}
#media only screen and (max-width: 480px){
#left_col {
width:100%;
}
#right_col {
width:100%;
}
}
</style>
<div id="wrap">
<div id="left_col">
...
</div>
<div id="right_col">
...
</div>
</div>