HTML:
<div id="wrapper">
<div id="tabs">
</div> <!-- tabs close !-->
<div id="verticalStack">
<div id="accordion">
</div> <!-- accordion close !-->
<div id="usersBox">
</div><!-- usersBox close !-->
<div id="displayProductButtons">
</div> <!-- displayProductButtons close !-->
</div> <!-- verticalStack !-->
</div> <!-- wrapper close !-->
CSS:
body {
margin:0;
padding:0;
font-family: Verdana, Times, serif;
font-size: 12px;
color: #333333;
background-color: #F9F9F9;
min-width: 944px;
}
#wrapper{
margin:10px;
width:90%;
}
#tabs {
float:left;
width:700px;
margin-right: 10px;
}
#verticalStack{
float:left;
width:400px;
height:500px;
}
#accordion{
float:left;
}
#usersBox{
width:100%;
margin-top:10px;
float:left;
border:1px solid #aaa;
border-radius:5px;
}
#display{
margin-top:25px;
float:left;
}
The page looks like this:
------------------------------------
| wrapper |
----- ------------------
| |tabs| |verticalStack | |
----- -------------------
| | |accordion | | |
-------------
| | |usersBox | | |
-------------
| | |display | | |
--------------
| | | |
----------------
|-------------------------------------
When I resize the page the veritcalStack div (along with the inner divs) falls under the tabs div. Can someone please explain to me why this occurs and what I can do about it?
You're floating your elements; they will remain side-by-side as long as the horizontal space is sufficient to provide for it. If you don't want them to collapse, you should put them within a container that has an explicit width; this will create a horizontal scrollbar at some point in your resizing though.
<!-- these images will not collapse -->
<div id="container">
<img src="http://placekitten.com/300/200" />
<img src="http://placekitten.com/200/200" />
</div>
<!-- these images will collapse -->
<img src="http://placekitten.com/300/200" />
<img src="http://placekitten.com/200/200" />
Working Fiddle: http://jsfiddle.net/jonathansampson/EChrr/
My suggestion would be to embrace this; check out Responsive Web Design and find how to use the natural behavior of the browser to your advantage.
Floated elements will stay side by side until there is insufficient space (i.e in your case when the browser window is less than 1110px wide). If this is how the design must be, then you should set a width, or min-width on the #wrapper to 1110px wide.
You could also try setting the widths of the floated elements relative to the other elements (i.e using percentages) so that the design works across smaller resolutions just as well.
Related
I am trying to setup a div with bootstrap.
My problem is that I need to have a set margin on the left and right of the div. By using col-md-10 doesn't get me the margin I need. It's more than 10px if the screen is wide.
For example:
<div class="col-md-offset-1 col-md-10">
//contents...
</div>
-------------------------------------
| --------- div --------------
|10px margin 10px margin
| | |
| | |
| -------------------------------
-------------------------------------
Does anyone have an idea of how to fix it? Thanks a lot!
If I understand you want always a margin value of 10px at each side. You can create a custom class and use calc(), try this:
<div class="col-md-offset-1 col-md-10 margin">
//contents...
</div>
.margin {
margin:0 10px;
width:calc(100% - 20px);
}
Check this BootplyDemo
Another Option could be a custom class on the container and use padding. Try:
<div class="container margin">
<div class="col-xs-12">
//contents...
</div>
</div>
.margin {
width:100%;
padding:0 10px;
}
Another BootplyDemo
You should be using the container-fluid class on your main content div.
<div class="container-fluid">
<!-- Contents -->
</div>
What this does is creates a full-width container with a bit of padding on the right and left, top and bottom that responsively resizes based on the width of your browser.
Hope this helps!
+-------------+ +---------------------------------+
| | | |
| 1 | | |
| left-nav | | |
| | | |
+-------------+ | 3 |
| | | |
| | | |
| 2 | | very long contents here |
| | | which causes to scroll |
| other | | vertical bar. Setting |
| remaining | | this content to 100% height? |
+-------------+ +---------------------------------+
What is height: 100%; actually? Is it applied to a page window or till the scroll ends?
I have following html...
<div id="wrapper">
<div id="left-nav">
<!--contents of 1-->
</div>
<div id="yourad">
<!--contents of 2--->
</div>
<div id="main-contents">
<!--contents of 3-->
</div>
</div>
My css is as follows....
#wrapper{position: relative; width: 1007px; margin: 0 auto;}
#left-nav{width: 329px; height: 100%; background: grey;float: left;}
#yourad{height: 100%; background: blue;}
#main-contents{margin-left: 329px; padding: 10px; background: pink;}
****Note: ****
First see my demo to understand my problem Here
Contents of 1 actual height: I don't know.
Contents of 2 actual height: I dont't know.
Contents of 3 actual height: I don't know.
Because I may need for some pages less contents and some pages more contents.
I've tried by using height: 100%; in html, body, wrapper, left-nav, yourad, but could not success.
Height 100%, when applied to a child element, will make the element stretch to the full height of its parent.
For instance, if you set your #wrapper {height:600px} and your #content{height:100%} the content div will now have a height of 600px.
The confusion comes in because the default overflow property is: overflow:visible - will not be clipped by contrainsts of containing element. So without explicitly setting an overflow of hidden or scroll, the content will flow outside of the container.
You can see this being demonstrated in your example (http://jsfiddle.net/RrmK3/) by setting a background color on the parent div.
<div id="wrapper" class="wrap">
<div id="left-nav">
<h4>Menu Title</h4>
<ul>
<li>Menu Item</li>
</ul>
<div id="yourad">
You add is in your sidebar. It is not in your question :)
</div>
</div>
<div id="contents">
<h1>Indenting Code Keeps you Sane.</h1>
</div>
</div>
#contents{ margin-left: 330px; margin-top: 5px; height:100%; }
#wrapper{position: relative; width: 1007px; margin: 0 auto; height:200px; background:pink;}
Ok, this is really hard to explain in writing but I'll give it a shot.
When you set your body to 100%, it will always stay at the height that it started at, so it will cut off anything below the visible body.
The problem here is that one of your columns has to be a fixed height so your wrapper can know how to translate percents. Since you wont know what the height of left-nav is, you can cheat and use javascript to set the height of your wrapper to the height of your left-nav and the content text will overflow correctly..
Enough with the words, here's how you do it:
$('#wrapper').height($('#left-nav').height());
http://jsfiddle.net/Y7PhV/106/
I am new to laying out webpages without the use of tables, so my apologies if this is a really simple question.
I am attempting to create a header for a page which I want to look something like this:
-------------------------------------------
| | Some big text |
| img | |
| | Some smaller text |
-------------------------------------------
Currently I have the following div, but it does not bottom align the small text like I want:
<div style="height:50px;">
<img src="img.jpg" style="vertical-align:middle; height:100%; float:left"/>
<div style="vertical-align:top;">BigText</>
<div style="vertical-align:bottom;">SmallText</div>
</div>
How should I do this?
Thanks!
My version: http://jsfiddle.net/gT6ze/
Alternatively, you can use position:relative for container div, set padding:60px for it, and position image within it with position:absolute; top:0; left:0;. This way div elements with text can also be positioned inside parent by setting position:absolute and top:0 and bottom:0.
use the padding or margin for the small text div
<div style="height:50px;">
<img src="img.jpg" style="vertical-align:middle; height:100%; float:left"/>
<div style="vertical-align:top;">BigText</>
<div style="vertical-align:bottom;padding-top:15px;">SmallText</div>
</div>
demo
I have a problem that I thought was pretty simple but that is taking me a lot of time to solve it. If there is a simple solution (and I don't know CSS enough), please point me there and I'll close this question immediately.
My problem is the following.
I have 6 divs one on top of another, something like:
<div id="header">header content</div>
<div id="sidebar1">sidebar1 content</div>
<div id="maincontent">maincontent content</div>
<div id="maincontent2">maincontent2 content</div>
<div id="sidebar2">sidebar2 content</div>
<div id="footer">footer content</div>
What I want to have is something like:
-----------------------------------------------------------
| header content |
-----------------------------------------------------------
-------------------------------------- -------------------
| maincontent content | | sidebar1 content|
| | -------------------
| | -------------------
| | | sidebar2 content|
| | -------------------
--------------------------------------
--------------------------------------
| maincontent2content |
| |
| |
| |
| |
--------------------------------------
-----------------------------------------------------------
| footer content |
-----------------------------------------------------------
In other words, is there a way to create a right column even if the divs are not one after another using only CSS and without moving the divs in the code?
I tried to use for sidebar1 the following css
position:absolute;
top:3em;
right:0;
and for sidebar2 the following css
position:absolute;
top:9.5em;
right:0;
but I have the impression that this is not the right way to do it.
A simple way could be to define the top attribute size as a function of the height of heather, but I couldn't find any way to do it only with CSS.
Thanks!
Well... as a direct answer to your question, you can use a combination of floats and % widths to accomplish this. You can also use fixed widths, but you'll have to determine what those sizes are. Here's a simple implementation:
Demo
CSS
#maincontent
{
float:left;
width:70%;
background:#ee5;
}
#sidebar2,#sidebar1
{
float:right;
width:30%;
background:#5e5;
}
#footer
{
clear:both;
background:#5ee;
}
#header
{
background:#55e;
}
HTML
<div id="header">header content</div>
<div id="sidebar1" class="side">sidebar1 content</div>
<div id="maincontent">maincontent content</div>
<div id="sidebar2" class="side">sidebar2 content</div>
<div id="footer">footer content</div>
If I have a div layout like this:
<div id="stretchyheader"></div>
<div id="fixedwidthwide"><div>
<div id="fixednarrow></div>
<div id="footer"></div>
Which makes something like this:
-----------------------------------------------------
| stretchyheader |
-----------------------------------------------------
| | |
| | |
| fixedwidthwide | fixednarrow |
| | |
| | |
| | --------------
| |
| |
| | patterned
| | background
-----------------------
- footer -
How do I ensure that both columns are the same height as the deepest column? The column heights are flexible according to the amount of content and have a white background.
A very simple, common way to do this is using Faux Columns.
You would have a structure that looked something like this:
<div id="stretchyheader"></div>
<div id="container">
<div id="fixedwidthwide"></div>
<div id="fixednarrow></div>
</div>
<div id="footer"></div>
And you actually apply a background image to #container to add any background colors, borders, etc. to each of the 2 columns.
There are CSS techniques to do this without faking it, but they are much more complex:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
http://www.socialgeek.be/blog/read/flexible-equal-height-columns
Adapted from here:
Create a container around the two fixed columns, and have css something like this:
#container {
float:left;
width:[sum of the two columns width];
}
#fixedwidthwide {
float:left;
width:[whatever];
}
#fixednarrow {
float:left;
width:[whatever];
}
Note that this is only necessary if the columns need to be of equal height for some reason. If not, you can just follow philfreo's suggestion and use faux columns.
There are a number of solutions for this problem, including OneTrueLayout Technique, Faux Columns Technique and CSS Tabular Display Technique.
The best solution for equally height-ed columns is the CSS Tabular Display Technique that means to use the display:table feature.
It works for Firefox 2+, Safari 3+, Opera 9+ and IE8.
The code for the CSS Tabular Display:
The HTML
<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>
The CSS
<style>
#container{
display:table;
background-color:#CCC;
margin:0 auto;
}
.row{
display:table-row;
}
.col{
display: table-cell;
}
#col1{
background-color:#0CC;
width:200px;
}
#col2{
background-color:#9F9;
width:300px;
}
#col3{
background-color:#699;
width:200px;
}
</style>
Even if there is a problem with the auto-expanding of the width of the table-cell it can be resolved easy by inserting another div withing the table-cell and giving it a fixed width. Anyway, the over-expanding of the width happens in the case of using extremely long words (which I doubt anyone would use a, let's say, 600px long word) or some div's who's width is greater than the table-cell's width.
The Faux Column Technique could be a solution to this problem, but it has some drawbacks such as, you have to resize the background tiled image if you want to resize the columns and it is also not an elegant solution.
The OneTrueLayout Technique consists of creating a padding-bottom of an extreme big height and cut it out by bringing the real border position to the "normal logical position" by applying a negative margin-bottom of the same huge value and hiding the extent created by the padding with overflow:hidden applied to the content wraper. A simplified example would be:
The HTML file:
<html><head>
<style>
.wraper{
background-color:#CCC;
overflow:hidden;
}
.floatLeft{
float:left;
}
.block{
padding-bottom:30000px;
margin-bottom:-30000px;
width:100px;
background-color:#06F;
border:#000 1px solid;
}
</style>
</head>
<body>
<div class="wraper">
<div class="block floatLeft">first col</div>
<div class="block floatLeft">
Second col<br />Break Line
</div>
<div class="block floatLeft">Third col</div>
</div>
</body>
</html>
In my opinion the unimplemented 100% height within an automated height container is a major drawback and the W3C should consider revising this attribute.
Other resources: link1, link2, link3, link4, link5 (important)