I have a problem with my pixel calculations not adding up.
I have a main div (#page) that is: 980px wide
It has a child div (#content) that is also: 980px wide
Inside the div (#content) there are two divs (#left-pane), which is 300px wide and (#right-pane), which is 676 px wide.
Both of them have a 1px border all the way around - looking across the site horizontally this should give 4px in width.
Therefore,
300px + 676px + 4px = 980px
Despite this, my div (#right-pane) moves down below the div (#left-pane). Why?
I have padding and margin set to NONE on both of them.
HTML:
<head>
<title>Brazil Learner | The easy was to master Brazilian-Portuguese</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="top">
<img class="logo" src="images/logo.png" />
<ul class="social">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="nav">
<div class="nav-button">Home</div>
<div class="nav-button">Lessons</div>
<div class="nav-button">Guides</div>
<div class="nav-button">About us</div>
</div>
<div id="content">
<div id="left-pane">
</div>
<div id="right-pane">
</div>
</div>
<div id="footer">
<div>
</div> <!-- Page closer -->
</body>
</html>
CSS:
html,body,p,ul,li,img,h1,h2,h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
text-decoration: none;
color: black;
}
#page {
width: 980px;
margin: 0px auto;
}
/* Top */
#top {
border: 1px solid black;
overflow: hidden;
padding: 30px 30px;
}
.logo {
float: left;
width: 130px;
height: 130px;
}
.social {
float: right;
margin-right: 40px;
}
.social li {
display: inline;
margin: 0px 10px 0px 0px;
}
/* Nav */
#nav {
border: 1px solid red;
overflow: hidden;
margin-bottom: 20px;
}
.nav-button {
float: left;
width: 100px;
margin-right: 6px;
background-color: grey;
text-align: center;
}
/* Content */
#content {
margin-bottom: 20px;
overflow: hidden;
width: 980px;
}
#left-pane {
float: left;
width: 300px;
height: 700px;
border: 1px solid green;
}
#right-pane {
float: right;
width: 676px;
height: 700px;
border: 1px solid black;
}
/* Footer */
#footer {
float: left;
width: 980px;
height: 70px;
border: 1px solid blue;
}
I'm not sure if this will work or not, but add this and see if it works.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
What browser are you using to test your site?
I tossed up your code on a fiddle, and it appears just fine in my Firefox, which suggests that you're probably looking at it in IE, and possibly either in a non-standards mode, or an old version.
If that's the case, then it's due to how IE (namely, old versions), handle the box model and math. To IE, 300px + 676px + 4px > 980px . The easiest way to fix this is to reduce something that affects the width by 1-2px, and it will probably fix it.
To consider a width of a div, there are 4 comoponents you should think about
The width of the div itself (this is where your text will be for example)
The padding width (surrounding the width mentioned in point 1 above)
The width of your border (surrounding the padding)
The margin (surrounding the border)
So, if you search for CSS Box Model (some examples are here http://www.w3.org/TR/CSS2/box.html and here http://www.w3schools.com/css/css_boxmodel.asp), you will be able to see the box model that will help you with that. Also using jQuery you can retrieve the width of each section using the following methods: .width(), .innerWidth(), and .outerWidth(). Note you may need to do some calculations to finds border width, padding width, or margin width.
Read CSS documentation and jQuery documentation to have a clearer idea of how those work. Sometimes you may need to utilize jQuery to make the width calculations for you properly if you need some exact values with variable width objects.
Related
I'm reading through an HTML/CSS book and trying to place multiple div elements side-by-side via float, each with a fixed width and margin so that they fit perfectly into the page width. Even boiling down the book's example to its most simple form, the last column is always bumped down as though the containing element wasn't big enough. Any insight?
<html>
<head>
<style>
body {
width: 960px;
}
#c1, #c2, #c3 {
float: left;
width: 300px;
height: 50px;
margin: 10px;
border: 1px dashed black;
}
</style>
</head>
<body>
<div id="c1">
</div>
<div id="c2">
</div>
<div id="c3">
</div>
</body>
</html>
https://jsfiddle.net/1otbf659/
Because you have border, and your divs not 300px. Your divs are 302px.
Just add box-sizing: border-box to your divs.
#c1, #c2, #c3 {
float: left;
width: 300px;
height: 50px;
margin: 10px;
border: 1px dashed black;
box-sizing: border-box;
}
Here is JSFiddle demo
I am trying to create simple web page using divs. I have read a lot of articles, but everythere width and height of divs is specified in px. Maybe I don't understand something, but maybe it is better to specify this attributes in percantage ?
I have tried, but received not what expected.
I need to get such result
Here is my html
<!DOCTYPE HTML>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="style/stylesheet.css" />
</head>
<body>
<div id="container">
<!-- HEADER -->
<div id="header">
<div id="logo">Logo</div>
<div id="top_info">Top Info</div>
<div id="navbar">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
</div>
</div>
<div id="content_data">
<div id="banner">Banner</div>
<div id="left_col">Left column</div>
<div id="content">Contnent area</div>
<div id="right_col">Right column</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
And here is css file
#container {
width: 90%;
margin: 0 auto;
background: #fff;
}
#header {
width: 100%;
height: 60px;
border-bottom: 1px solid #c7c7c7;
background: #333;
}
#logo {
float:left;
width: 40px;
height: 40px;
margin: 10px;
background: #ccc;
}
#top_info {
float: right;
width: 100px;
height: 40px;
background: #666;
border: 1px solid #c7c7c7;
margin: 10px;
}
#navbar {
height: 20px;
clear: both;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
}
#navbar ul li {
clear: both;
}
#footer {
padding: 20px;
clear: both;
}
#navbar ul li a {
font-size:12px; float: left;
padding: 0 0 0 20px;
display: block;
}
#banner {
background: #666;
height: 120px;
clear: both;
}
#content {
width : 60%;
}
#left_col {
float: left;
width: 20%;
height: 200px;
border: 1px solid #333;
color: #FFF;
background: #000;
}
#right_col {
background: #000;
float: right;
width: 20%;
height: 200px;
border: 1px solid #333;
color: #FFF;
}
But get next result. If set width of container id in pixels it works great.
Please help to solve the problem if its possible.
And give some advices how to build responsible pages, maybe some articles or books.
Thx.
UPDATE
I have changed width to 50% and it works. I guess this is because of parrent div has width 90%, so 20%(left) + 20%(right) + 50% (content) = 90%. Am I right ?
The problem is that left and right columns have set border 1px. It makes their width 20% + 2 px (left and right 1px border). Also content area should be floated too.
EDIT: if you want these borders, set width of columns as follows:
width: calc(20% - 2px);
Using percentages is one way to create a responsive web page but the better way is by using Media Queries.
Take a look at CSS3 media queries.
They are exactly what you need. All you need to do is specify some maximum or minimum screen dimensions in your case for each media-query. This way, you can design how your site looks on mobile devices, tablets, computers, etc. and they need not all be the same!
Something that looks good on a big screen like that of a computer need not necessarily look good on a mobile device but using media query, you can design separate versions for both devices!
For example, you execute some CSS only for desktop computers using min-width
#media screen and (min-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of more than 800px*/
body {
background-color: lightblue;
}
}
#media screen and (max-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of less than 800px*/
body {
background-color: yellow;
}
}
This way, your webpage looks different on desktop computers and looks different on mobile devices and tablets.
Also, see this great link.
Yes, you are right.
Your percentages should add up to 100%
20%(left) + 20%(right) + 50% (content) = 90% (not 100%)
You could make the left and right percentages 25% each to get 100%. That should work fine.
The percentage is with respect to its direct parent. So it doesn't matter if parent is set to 90%. It's because of the 1px border on the side divs. which makes the divs a little bigger than 20%, going over 100% of parent.
You can solve this by make content little smaller to make space for the extra 4px due to the 1px borders on both side divs:
#content {
width : 58%;
float: left;
}
It is cleaner to float all divs left. You'll get the same result.
I want to make two divs equal heights – left and right divs.
I referred the following posts and found a bottom padding approach.
How do I achieve equal height divs (positioned side by side) with HTML / CSS ?
CSS: How to make left float div to adjust height dynamically?
I tried to apply this concept in my page; but it doesn’t work correctly. On top of the right div there is unwanted space. How can we rectify it?
CODE
<!DOCTYPE html>
<style type="text/css">
.myContent {
width: 100%;
border: 2px solid violet;
min-width: 1210px;
}
.myHeader {
width: 100%;
/*width: 1200px;*/
clear: both;
background-color: #DFE8EF;
border: 1px solid red;
}
.leftPart {
border: 1px solid red;
width: 200px;
height: 200px;
float: left;
background-color: silver;
}
.rightPart {
border: 1px solid orange;
background-color: beige;
float: left;
min-width: 1000px;
/*
margin-bottom: -1000px;
padding-bottom: 1000px;
margin-right: -5000px;
padding-right: 5000px;
*/
}
</style>
<html>
<head>
<title>UpdateAccrualByItem</title>
<link href="Content/MasterLayoutStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="body">
<div class="myContent">
<div class="myHeader">
<img src="/Images/logo_header.jpg" />
</div>
<div class="leftPart">
Menu
</div>
<div class="rightPart">
<h2>UpdateAccrualByItem</h2>
</div>
</div>
</div>
</body>
</html>
You are very close, but just have a few little things wrong.
You don't need a width for the right column, just the default width:auto. I used the same negative margin and padding trick to make the right column's height the size of the left's height and also to give the right column the illusion of taking up the rest of the space. You also should float the right container and take away the margin. You can remove the clear:both of the left column because it's not used
Demo here
.leftPart {
border: 1px solid blue;
width: 200px;
height:200px;
float:left;
background-color: orange;
}
.rightPart {
border: 1px solid orange;
background-color: beige;
float:left;
margin-bottom: -1000px;
padding-bottom: 1000px;
margin-right: -5000px;
padding-right: 5000px;
}
Edit
You might also add some type of #media query to allow adjusting the window to look more smooth. Here is an example. It's semi-hard coded based on the text length in the example, but on your final product it might be something you add on at the end
I have a <div id="content">, which contains <div id="sub-navigation> and <div id="main container">, which themselves are inline-blocks. I would like to be able to make the main container fill the rest of the available page width. Is that possible?
I need columns-strip to expand or shrink based on the number and width of column elements. If the width of the columns-strip exceeds the width of the main container, then a horizontal scroll bar should appear.
* {
margin: 0px;
padding: 0px;
font-size: 10pt;
white-space: normal;
}
#wrapper {
margin: 0px 20px;
background-color: red;
}
#header {
margin: 25px 10px 10px 10px;
height: 50px;
background-color: purple;
color: white;
}
#content {
margin: 10px;
padding: 10px;
font-size: 0pt;
white-space: nowrap;
overflow: hidden;
background-color: white;
}
#sub-navigation {
width: 200px;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
display: inline-block;
overflow: auto;
background-color: yellow;
}
#columns-strip {
padding: 10px;
font-size: 0pt;
white-space: nowrap;
background-color: mediumturquoise;
}
.posts-column {
margin: 0px;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
overflow: auto;
}
#footer {
margin: 10px 10px 25px 10px;
height: 50px;
background-color: navy;
}
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="sub-navigation"></div>
<div id="main-container">
<div id="columns-strip">
<div class="posts-column" style="background-color: lightgray;"></div>
<div class="posts-column" style="background-color: darkgray;"></div>
<div class="posts-column" style="background-color: gray;"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
You have to remove the inline-block styles and float the #sub-navigation div. inline-block is not suited for what you are trying to achieve. When you add no display styles, the div element will be the default value which is block, block elements take up all the available space by default. By floating the #sub-navigation element you make it only take up the space required for its contents.
#sub-navigation {
width: 200px;
height: 150px;
float : left;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
overflow: auto;
background-color: yellow;
}
make sure to add a clear: left element after the #main-container
That's not how inline-blocks are supposed to be used. Best thing to do here is make your navigation box float:left and leave the default display value alone.
If your header, footer and wrapper have specific widths, then yes, you can have your main-container fill the available space. But if you're not specifying widths in your CSS, then you need to determine how big your main-container CAN be based on the rendered width of the containing element (wrapper). The only way to determine that width after the page loads is with javascript. If you want your site to have a dynamic width but still have your content (sub-navigation and main-container) fill the screen, you would either need to use javascript or percentages, and percentages can get ugly when you start looking at varying resolutions of monitors, laptops, etc...
Ever heard of flex box model!!
It is made just for that.
Note in flexbox model all child elements act as flex box model you cant opt out certain things. Which mean if page has navigation and under it content div + side div. You can't make top navigation out of it. Which has implications. So solution is to have all things only that need flex box in one div.
I think this problem is best explained by images. This is how my accordion looks:
When you click on the small plus/minus icons the slides under each chapter will expand/collapse. However when the content in the accordion grows too tall, it grows out from its container. So if I click on more plus icons the accordion will look like this (not pretty):
As you can see, the container is not growing taller together with the accordion and it does not look good.
This problem only occurs in IE7 and IE8. It works in Firefox and Chrome.
The HTML looks like this (simplified):
<div id="content">
<div class="box2 rounded-corners">
<div class="chapters">
<h3>Obsah</h3>
<div id="accordion">
<ul>
... // accordion content - too long
... // accordion content - too long
</ul>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
<div class="training-body">
... // content to the right of the accordion
</div>
</div>
</div>
The CSS, again siplified:
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
#content {
background: white url('/images/background_middle.png') left top repeat-x;
padding: 13px;
min-height: 40em;
height: auto !important;
height: 40em;
}
/* this is the div with rounded corners */
#content .box2 {
background: white;
padding: 0 15px 15px;
border: 1px solid #C5E3F8;
position: relative;
}
/* left sidebar 98
#content div.chapters {
float: left;
width: 224px;
}
/* orange heading "OBSAH" */
#content div.chapters h3 {
color: #ff6e19;
text-transform: uppercase;
font-size: .9em;
text-align: center;
padding-bottom: .5em;
margin-top: 1em;
margin-bottom: 0;
}
#content div.chapters h3 a {
color: #ff6e19;
}
/* accordion */
#accordion {
width: 226px;
border-top: 1px solid #c5e3f8;
}
#accordion ul {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
/* area to the right of the accordion */
#content div.training-body {
float: left;
padding-left: 0px;
width: 748px;
line-height: 1.3em;
}
Hmmm, after a lot of research, it turned out that the curvycorners plugin is causing the problem, here's what you have to do:
Download the latest version of the plugin (also try to upgrade your jQuery, but this is only a tip)
change your rounded-corners CSS to the following:
.rounded-corners {
-moz-border-radius:2ex;
-webkit-border-radius:2ex;
}
in your JS and after toggleing the ULs, you need to redraw the corners, refer, using the following:
$this.parent().parent().children('ul').toggle();
curvyCorners.redraw();
EDIT sorry, my first answer was incorrect
The problem is with the min-height you set. IE 7 and 8 support min-height, but incorrectly handle !important, not giving it priority over the the next declaration. To solve just remove the two height lines. If you want to support IE6 add the height rule like the following
...
min-height: 40em;
}
* html #content {
height: 40em;
}