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
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'm trying to figure out how to get 2 divs to perfectly divide a page. My HTML logic is as follows.
The total width of an element is its width plus twice the size of its border-size
The outer div is 700 pixels wide and has no padding
Therefore, I can make a perfect subdivision with 2 inner divs by making them have display: inline; width: 348px; border: 1px; They will be squashed up right next to each other and take up the entire width of the outer div.
But for some reason this isn't working. Please cleanse me of my sins.
Link: http://jaminweb.com/practice.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>practice page</title>
<style type="text/css">
.main-content
{
border: 1px dashed black;
padding: 0px;
width: 700px;
}
.left-side
{
border: 1px dashed blue;
margin: 0px;
float: left;
width: 348px;
height: 900px;
display: inline;
}
.right-side
{
border: 1px dashed red;
margin: 0px;
float: right;
width: 348px;
height: 900px;
display: inline;
}
</style>
</head>
<body>
<div class="main-content">
<div class="left-side">
<p>Here's the left side.</p>
</div>
<div class="right-side">
<p>And here's the right side</p>
</div>
</div>
</body>
</html>
You could also set the two inner div's to width: 50%; if you use box-sizing: border-box;. Then you dont have to think about border-sizes, and it's a more flexible structure.
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'm trying to achieve a 1 column flexible / 1 column fixed layout. 'col-a' should be flexible, taking up 100% - 110px, 'col-b' should be fixed and aligned right.
I' trying to use negative margins but having little luck.
<div class="cont">
<div class="col-a">
Be flexible
</div>
<div class="col-b">
Be fixed
</div>
</div>
.cont {
background-color: #00f;
padding: 10px;
overflow:hidden;
}
.col-a {
background-color: #0ff;
padding-right: 110px;
margin-right: -110px;
float: left;
}
.col-b {
background-color: #ff0;
width: 110px;
float: left;
}
Can it be done using just this mark-up?
/*Answer found */
Here is the solution
.cont {
background-color: #00f;
overflow:hidden;
padding: 10px;
}
.col-a {
width: 100%;
background-color: #0ff;
margin-right: -110px;
float: left;
}
.col-b {
background-color: #ff0;
width: 110px;
float: right;
}
I wouldn't use a negative margin for this.
This is how I would set it up.
Set your column parent container to position relative.
Set your column A to have a padding-right of 110px (to make space for Column B)
Set your column B to be absolutely positioned to the top, right with a fixed width of 110px.
This will allow your Column A to expand 100% horizontally, while leaving space on the right for Column B.
Here's an example of what I outlined above: http://jsfiddle.net/NPn8d/
How about something like this, then.
<style type="text/css">
.cont{position:relative;}
.col-a{
border:1px solid #0000ff;
width:auto;
margin:0,110,0,0;
}
.col-b{
border:1px solid #ff0000;
width:110px;
float:right;
top:0;
position:absolute;
margin:0,0,0,-110
}
</style>
<div class="cont">
<div class="col-a">Be flexible</div>
<div class="col-b">Be fixed</div>
</div>