I want to split my web application window in two columns as 30% and 70% like we do in html,what should i do??
Use the exact same HTML code..
Note, you can change to dynamic percentages too by using outer divs, using tables (gasp!), etc. CSS purists might not like tables, but they still work in every browser out there.
.left{
width: 700px;
float: left;
}
.right{
width: 300px;
float: left;
}
<div class="left">
</div>
<div class="right">
</div>
Related
I have been trying to build a website having a 3 column layout. All of the body is given a margin:0 auto to keep it at the centre, and has a minimum width of 1218px.
Now, what I want to do is reposition the right column in such a way the it goes below the left column without affecting the centre column. A live example would be twitter home page, where at the left I can see my profile and trends, the centre column features the tweets and the right column shows suggestions on a 1366x768 screen, now if I change the screen size to 1024x768, the column of suggestions at right goes down below the left column but the central timeline is unaffected.
The definition would be:
<div class="containter" style="margin:0px auto;">
<div class="left-col" style="width:290px; float:left;">Left Stuff goes here </div>
<div class="center-col" style="width:590px; float:right;"> Center body </div>
<div class="right-col" style="width:290px; float:right;">right Stuff goes here </div>
</div>
Now note that the central column has a right float, copied from twitter.
I can't use media queries for that since the website is going to deal with a lot of old browsers and also I would like to avoid JavaScript if possible.
Any help?
You can't do that with "min-width" of the main container. You must use "max-width" since you want to make sure something happens when the screen width gets more narrow. And the main column (in the center) has to be left-floated, not right. Here's a possible solution. However the whole questions seems weird to me since you want to make a responsive layout in an old browser that doesn't support responsive CSS.
<style>
.container {
max-width: 1218px;
}
.leftColumn {
float: left;
width: 300px;
height: 500px;
background-color: brown;
}
.mainColumn {
float: left;
width: 700px;
height: 500px;
background-color: darkgreen;
}
.suggestions {
float: left;
width: 218px;
height: 500px;
background-color: darkorange;
}
.cleaner {
clear: both;
}
</style>
<div class="container">
<div class="leftColumn">
LEFT
</div>
<div class="mainColumn">
MAIN
</div>
<div class="suggestions">
SUGGESTIONS
</div>
<div class="cleaner"></div>
</div>
I'm building a responsive site. The basic version has 2 columns, each column features a few boxes:
The 1 column layout shold look like this:
A naive approach for the one column version would be to place everything from second column under column one...but I can't do that. I need to be able to pick boxes from both columns and place them in custom order.
The only way I can think of is via box duplication and hiding for desktop/mobile. Do you have any suggestions?
Thanks, Michal
UPDATE: Since this seems to be Isotope (and similar libraries related), I've created a new post here: Reordering boxes with Isotope
This is very nearly possible with some custom CSS. Unfortunately Bootstrap's default grid won't cater to your needs because items in either column have different heights.
Here's a basic example on JSBin (resize the output pane to see the elements stack).
There's a lot of custom CSS here which is unfortunate, but it works.
.col-right, .col-left {
width: 50%;
padding: 15px;
margin-bottom: 10px;
}
.col-left {
float: left;
clear: left;
height: 300px;
background: teal;
}
.col-right {
float: right;
clear: right;
height: 200px;
background: orange;
}
#media (max-width: 767px) {
.col-left, .col-right {
float: none;
width: auto;
}
}
I've added a simple breakpoint at 767px for demonstration. If you're using Bootstrap's LESS, you'll want to replace this with #screen-xs-max.
HTML
<div class="row">
<div class="col-left">A</div>
<div class="col-right">D</div>
<div class="col-left">B</div>
<div class="col-right">E</div>
<div class="col-right">F</div>
<div class="col-left">C</div>
<div class="col-right">G</div>
</div>
This works by using float: left or float: right for the left/right columns and clearing only the float for that column. It's not perfect, but it's the closest you're going to get without using a JavaScript library like Masonry.
Sounds like you should have a look into Isotope, seems to me it could help with what you are trying to achieve.
http://isotope.metafizzy.co
You could use Isotope and set up a one column layout.
You could also use Isotopes sorting to customise the order of your boxes on mobile.
http://isotope.metafizzy.co/sorting.html
Try this one?
<div style="float:left; width:50%; background: rgb(121, 82, 0);">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
<div style="float:left; width:50%; background: rgb(0, 0, 255);">
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
</div>
I'm new to CSS and have a somewhat general question, but with a specific purpose.
Here is the webpage in question: http://www.lymemd.org/indexmm6.php
I have several DIVs: #BannerArea, #BannerinLeft, and #BannerinRight, all which format everything in the green square. I'm looking to split everything up and so something like this:
If anyone could help point me in the right direction in terms of what tags I'll need to do and what I'll need to get rid of, I would be very grateful. I have tried many times to get everything right, but I always end up making something worse.
Thanks very much.
The simplest way would be to make two columns, the left one including the Twitter and What's New div, and the right one including the Support Us and Diane Rehm divs. These two columns will have to float, so make sure they are in a container of the correct width. The top div is easy.
Here's a jsfiddle: http://jsfiddle.net/83ngD/7/
The basic HTML:
<div id="wrapper">
<div id="topgreen"></div>
<div id="leftcolumn">
<div id="twitter"></div>
<div id="whatsnew"></div>
</div>
<div id="rightcolumn">
<div id="supportus"></div>
<div id="dianerehm"></div>
</div>
</div>
The basic CSS:
#wrapper {
width: 960px; /*/ example width /*/
margin: 0 auto; /*/ centers the div /*/
}
#topgreen {
width: 100%;
height: 50px; /*/ example height /*/
}
#leftcolumn {
width: 50%;
float: left;
}
#rightcolumn {
width: 50%;
float: left;
}
Now just fill the other divs with the content you want. The code above will give you the layout from your picture, but very basic.
Just to keep my front-end web dev skills current, I decided to create a "sandbox/playpen" website based on the the fictional LCARS user interface familiar to fans of Star Trek. Here's the link.
http://www.king-con.com/sto/console/
If you take a look, you may notice that the some of the sub sections (views) have trek-ish looking headers, the basic HTML for which is:
<div style="display:table;width:100%">
<div style="display:table-row;">
<div style="display:table-cell;width:15px;background-color:somecolor;border-radius:10px;">FIXED WIDTH (15px)</div>
<div style="display:table-cell;">WIDTH VARIES WITH HEADER TEXT</div>
<div style="display:table-cell;background-color:somecolor;border-radius:10px;>WIDTH EXPANDS TO FILL REMAINING SPACE</div>
</div>
ATM, I'm using a server-side function to write out those headers. It simply takes one argument (the text) and writes out the HTML based on the character length of the text.
You may also notice it isn't really working, that is it doesn't do a very precise job of guesstimating the actual pixel-width of the header text, and sizing the divs accordingly.
I'm wondering if there isn't a client-side, perhaps jquery-based method for precisely guaging the pixel-width of the various header captions.
Thanks in advance for any ideas.
I believe your best bet is to do all of the styling client side with CSS rather than trying to calculate the text width on the server.
HTML:
<div class="container">
<span class="fixed">FIXED WIDTH (110px)</span>
<div class="varies">WIDTH VARIES WITH HEADER TEXT</div>
<div class="right">WIDTH EXPANDS TO FILL REMAINING SPACE</div>
</div>
CSS:
.container {
overflow: hidden; /* clear the float */
}
.fixed {
height: 50px;
width: 110px;
vertical-align:middle;
float: left;
border-radius:10px;
background-color:red;
}
.varies {
height: 50px;
float: left;
border-radius:10px;
background-color:green;
}
.right {
height: 50px;
overflow: hidden;
background-color: blue;
border-radius:10px;
}
Based on this answer: How to make an inline-block element fill the remainder of the line?
Fiddle Here: http://jsfiddle.net/YRDCF/
My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?
<div style='width:30%; text-align:center; float:left; clear:both;'> Is what I have now.
You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.
You can use
.floatybox {
display: inline-block;
width: 123px;
}
If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.
Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up
My answer:
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
Why?
Technically, a Span is an inline element, however it can have width, you just need to set their display property to block first. However, in this context, a div is probably more appropriate, as I'm guessing you want to fill these divs with content.
One thing you definitely don't want to do is have clear:both set on the divs. Setting it like that will mean that the browser will not allow any elements to sit on the same line as them. The result, your elements will stack up.
Note, the use of display:inline. This deals with the ie6 margin-doubling bug. You could tackle this in other ways if necessary, for example conditional stylesheets.
I've added a wrapper (#whatever) as I'm guessing these won't be the only elements on page, so you'll almost certainly need to segregate them from the other page elements.
Anyway, I hope that's helpful.
you can do:
<div style="float: left;"></div>
or
<div style="display: inline;"></div>
Either one will cause the divs to tile horizontally.
I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note: This is not tested so it might need tweaking for older browsers.
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
I would use:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
It's the first time I use this 'code tool' from overflow... but shoul do it by now...
What you might like to do is look up CSS grid based layouts. This layout method involves specifying some CSS classes to align the page contents to a grid structure. It's more closely related to print-bsed layout than web-based, but it's a technique used on a lot of websites to layout the content into a structure without having to resort to tables.
Try this for starters from Smashing Magazine.
Look at the css Float property. http://w3schools.com/css/pr_class_float.asp
It works with block elements like div. Alternatively, what are you trying to display, tables aren't evil if you're really trying to show a table of some information.
I would try to give them all display: block; attribute and using float: left;.
You can then set width and/or height as you like. You can even specify some vertical-alignment rules.
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
another...
try to use float: left; or right;, change the width for other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)