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.
Related
The div elements inside the row are floated left, as described here:
http://www.w3schools.com/html/html_responsive.asp
and percentage sized.
I tried to apply what was suggested in this link below, in a similar question, but without success:
Responsive CSS / Inline divs
The divs keep an inline relation of 50% - 100% - 50% and their contents overlap.
Can anyone help me spot what I missed?
Thank you.
In my CSS and HTML I have:
footer[role="contentinfo"] div {
box-sizing: border-box;
}
.engage-row:after {
content: "";
display: table;
clear: both;
}
.col-1 {
float: left;
width: 25%;
}
.col-2 {
float: left;
width: 50%;
padding: 10px 20px 0px 20px;
}
.col-3 {
float: left;
width: 25%;
}
.footer-wfix {
clear: both;
}
/* for illustrative purposes */
.engage-row {
border: 1px solid red;
}
.engage-row > div {
border: 1px solid blue;
}
<footer id="colophon" role="contentinfo">
<div class="footer-wrap">
<div class="engage-row">
<div class="col-1">
Column 1
</div>
<div class="col-2">
Column 2
</div>
<div class="col-3">
Column 3
</div>
</div>
<div class="footer-wfix">
Footer Menu and Site-generator
</div>
</div>
</footer><!-- #colophon -->
Edited the code and am adding the below for clarity:
- I edited the footer by adding the "engage-row" and it's containing column divs.
- All divs have inherited box-sizing: border-box.
- Column 1, Column 2 and Column 3 don't readjust positioning when I decrease the screen size (width); instead of becoming on top of each others, they are changing their size (keeping percentages but becoming smaller), making the containing text and images overlap (text from column 2 goes in front of the image in column 1). I hope I am using the correct terms for clarity.
- How can I make them readjust the positioning as the screen size changes?
- PrintScreen: 3column divs in footer
(This is an awesome site. Thank you)
You need to take into account the padding in the .col-2 declaration. When you have three columns adding up to a total of "100 % width" and then add padding, the result so to speak is "more than 100 % width", causing the overlapping behavior you observe.
One way around it is to declare the paddings in percent as well. If you don't like the resulting "elastic margins", you need to figure out a equation that works. Or check out Bootstrap or something similar (I mean you can either use it as is, or decipher their responsive solutions).
You need to add the css3 property box-sizing: border-box; This will wrap your padding into your div, so the width will be 50% only.
Please share your feedback if its helpful for your problem.
.col-2{
float: left;
width: 50%;
padding:10px 20px 0px 20px;box-sizing: border-box;
}
you mention 25% 50% 25% and a border of div so overlapped,
in this case use box-sizing: border-box;
.engage-row:after {
content: "";
display: table;
clear: both;
}
.col-1 {
float: left;
width: 25%;
}
.col-2 {
float: left;
width: 50%;
padding: 10px 20px 0px 20px;
}
.col-3 {
float: left;
width: 25%;
}
.footer-wfix {
clear: both;
}
/* for illustrative purposes */
.engage-row {
border: 1px solid red;
}
.engage-row > div {
border: 1px solid blue;
box-sizing: border-box;/*added one*/
}
This is what I needed (I couldn't be clear until I researched enough):
The left and right divs include images and I didn't want those to change size as I decrease the screen resolution. I wanted to input that adjustment in the middle div which contains only text and a subscription form.
The question/answer that drove me there:
How to make element fill remaining width, when sibling has variable width?
My testing fiddle - http://jsfiddle.net/0gvxxpjj/
<!-- In html--->
<div class="row">
<div class="col-1">
<img src="">
</div>
<div class="col-3">
<img src="">
</div>
<div class="col-2">
<h3>Header</h3>
<p>This is a paragraph that, along with the header, needs to wrap as the screen is resized</p>
</div>
</div>
<!-- html ends here-->
/* CSS starts here */
.col-1 {
float: left;
width: 100px;
}
.col-3 {
float: right;
width: 100px;
}
.col-2{
padding: 10px 20px 0px 20px;
overflow: hidden;
}
.row {
border: 1px solid black;
display: inline-block;
}
.col-1, .col-3 {
border: 1px solid blue;
}
.col-2 {
border: 1px dashed red;
}
Hope it becomes useful to someone else.
As I understand it, you want to have the divs be in a 25% - 50% - 25% layout and after the browser shrinks beyond a certain size, they become 100% width and stack on top of each other.
This is done via media queries. What, essentially, happens is that you set some CSS rules inside a media query which adds to any previous CSS rules only when a certain condition has been met (in this case browser width). A rough example can be seen below.
These are the relevant parts:
This sets how the divs will look by default - full width.
.col-1,
.col-2,
.col-3 {
float: left;
width: 100%;
}
This sets the widths of the divs to 25-50-25 once the browser width is larger than 768px.
#media all and (min-width:768px) {
.col-1, .col-3 {
width: 25%;
}
.col-2 {
width: 50%;
}
}
You can extend this example to the layout you desire.
footer[role="contentinfo"] div {
box-sizing: border-box;
}
.engage-row:after {
content: "";
display: table;
clear: both;
}
.col-1,
.col-2,
.col-3 {
float: left;
width: 100%;
}
.col-2 {
padding: 10px 20px 0px 20px;
}
.footer-wfix {
clear: both;
}
/* for illustrative purposes */
.engage-row {
border: 1px solid red;
}
.engage-row > div {
border: 1px solid blue;
}
#media all and (min-width:768px) {
.col-1, .col-3 {
width: 25%;
}
.col-2 {
width: 50%;
}
}
<footer id="colophon" role="contentinfo">
<div class="footer-wrap">
<div class="engage-row">
<div class="col-1">
Column 1
</div>
<div class="col-2">
Column 2
</div>
<div class="col-3">
Column 3
</div>
</div>
<div class="footer-wfix">
Footer Menu and Site-generator
</div>
</div>
</footer><!-- #colophon -->
i have problem with displaing divs inline on mobiles. So code works fine in PC's but when i visit my website in mobile i just dont display divs in right way.
Image div is above the div with text (should be inline). This is not case of width because even if i change width of image to just 5px, this small image is still above not right next to.
Example: http://www.filmypodobnedo.pl/matrix/
Whole thing is about listing of similar movies to chosen one (in example matrix), listed movies (IMAGE + TEXT should be displayed inline, that works on PC but not on mobile).
HTML:
<div class="podobny_film">
<div id="zdjecie_podobne">
<img class="featured-project-image" width="100" height="150" alt="Filmy podobne do Equilibrium" src="http://www.filmypodobnedo.pl/photos/Equilibrium.jpg">
</div>
<div id="tekst_podobne">
</div>
CSS:
.podobny_film {
float: left;
width: 80%;
color: #555555;
border-style: dashed;
border-width: 1px;
border-color: black;
padding: 10px;
}
#zdjecie_podobne {
width: 120px;
float: left;
}
#tekst_podobne {
width: 75%;
float: left;
font-size: 16px;
}
add display:inline-block to #zdjecie_podobne and #tekst_podobne
The div "podobny_film" contains div "zdjecie_podobne" with fixed pixel width and div "tekst_podobne" with percentage width. Try to use a percentage width for the div "zdjecie_podobne" and for the image as well, then it should not break.
#zdjecie_podobne {
width:24%; /*together with tekst_podobne that's 99% so be aware of any margins or paddings that might sum up > 100%!*/
float: left;
}
.featured-project-image { width:100%; }
This should work :) :
#zdjecie_podobne {
width: 120px;
float: left;
display:inline-block;
}
#tekst_podobne {
width: 75%;
float: left;
font-size: 16px;
display:inline-block;
}
I am trying to have a header that is split three ways (a logo to the left, something in the middle, and something else to the right). The width of the header is 100%.
The issue I am having is that the right part only appears lower (under the info in the middle div). Not sure how to simply display the right part to the right in that case. I might not be explaining this very well, let me know if I can clear this up further.
<div id="header">
<div id="logo">
logo
</div>
<div id="header-middle">
</div>
<div id="header-right">
</div>
</div>
with the css:
#header {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #fafafa;
height: 55px;
border-bottom: 1px solid #d3d3d3;
overflow: auto;
}
#logo {
font-size: 24pt;
color: #08a3d9;
width: 100px;
float: left;
}
#header-middle {
width: 300px;
margin-left: auto;
margin-right: auto;
}
#header-right {
float: right;
width: 300px;
margin-right: 20px;
text-align: center;
}
Your CSS is fine. Just move #header-middle last in your HTML. Then what is float: right will go right, float: left will go left, and the middle content will fill upwards and occupy the unclaimed middle space. What is happening the way you have it, is the unfloated element is pushing the floated element after it.
<div id="header">
<div id="logo">
logo
</div>
<div id="header-right">
</div>
<div id="header-middle">
</div>
</div>
If changing the HTML order is not an option, then just assign widths to everything, and float all the items left.
Here's another solution for your consideration:
In the code below, I've removed all floats and used relative sizing to allow your design to better handle narrow ...
... and wide ...
... screen widths more responsively.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#header {
padding: 25px 10px;
height: 55px;
border-bottom: 1px solid #d3d3d3;
overflow: no-content;
min-width: 400px;
}
div#header div {
display: inline-block;
padding: 1% 0;
margin: 0 2%;
text-align: center;
border: 4px dashed; /* Useful for positioning */
font-size: 2em;
}
#logo {
color: #08a3d9;
width: 20%;
border-color: red;
}
#header-middle {
width: 40%;
border-color: green;
}
#header-right {
width: 20%;
border-color: blue;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
logo
</div>
<div id="header-middle">
middle
</div>
<div id="header-right">
end
</div>
</div>
</body>
</html>
I'd also recommend using something like HTML5 Boilerplate or Columnal that provide a decent responsive grid system so that your site works beautifully on both desktop & mobile.
I made another jsFiddle for you.
updated http://jsfiddle.net/zGfh7/
My answer is much more complicated than magi's, but it also works.
I added float: left to the middle header.
Also, I changed the widths of all the headers to 33%, and removed all margin-left and paddings, etc, to make things more clean. You can keep or change the 33% widths to your preference, but making sure that all the widths add up to 100% ensures that the header is nicely filled.
I've also added background-colors so you can see that things align nicely.
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.
I am having issues with the below HTML when resizing the window;
1: Right bar suddenly drops down when the width is resized too small.
2: Spacing between the content and right bar gets larger as the width gets larger.
<style type="text/css">
#content {
width: 80%;
float: left;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="content">contents</div>
<div id="rightbar">
link 1
link 2
link 3
</div>
There are two ways to get the result you want:
put the right bar before the content
in the html, remove the width from
the content and give it a right
margin instead (width of the right
bar + something extra)
position the right bar absolutely on the right, remove the width from
the content and give it a right
margin instead (see number 1.)
By the way, the problem is that you are mixing absolute and relative widths and what you see is exactly what you are supposed to see.
Edit: After re-reading your question, I think that with overflow:hidden (makes it a nice square block) on the content part, you can get it to work in combination with 1. without the margin:
<style type="text/css">
#content {
overflow: hidden;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="rightbar">
link 1
link 2
link 3
</div>
<!-- content needs to be placed after rightbar -->
<div id="content">contents</div>
Once you resize too small, the percentages width will be smaller than the text content within your element. The browser cannot concatenate words, so the element is forced to have a min-width. Try putting the elements in a wrapper with an assigned min-width.
Between these two bars you have a space of 3%. 3% of 1000px is 30px. 3% of 2000px is 60px. Therefore if you right element is floating right, it makes sense you'll see that additional space. Try floating the element left.