I have created two rounded corner boxes which i would like to be aligned next to each other .But the 2nd box is appearing directly below the first one inspite of me using float:left on the 1st one. Any way to fix this would be really helpful. Below are the html and the css.
The HTML :
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="layout.css"/>
</head>
<body>
<div id="containerDiv">
<!-- Box 1 -->
<div id="box1" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
<!-- Box 2 -->
<div id="box2" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
</div>
</body>
</html>
The CSS :
#containerDiv {
width: 1000px;
}
.boxDiv {
width: 248px;
}
.upperRound {
background-image: url('rounded_upper.gif');
height: 20px;
}
.lowerRound {
background-image: url('rounded_lower.gif');
height: 20px;
}
.boxContent,.boxTagLine {
border-left: 2px solid #B5B5B5;
border-right: 2px solid #B5B5B5;
padding: 10px;
background-color:#F8F8F8;
solid #B5B5B5;
}
.boxTagLine {
color:#0066FF;
}
#box1 {
float:left;
}
Second div must float to right and next element should clear float. I'll add more info in a second.
I was a bit wrong. You even don't need clearing div.
Check out this question.
So - in your case, add this to css=>
#box2 {
float:right;
}
#containerDiv {
width: 1000px;
overflow: hidden;
}
I didn't try it, but it should work.
Mine approach will leave space between boxes. So - it might be not desired effect.
You would be better off using spans
But if you have to use divs :
.boxDiv {
width: 248px;
display: inline;
}
float both boxes left:
#box1,#box2 {
float:left;
}
You'd be better off floating your .boxDiv left, like so:
.boxDiv {
width: 248px;
float: left;
}
That way if you add more boxes they'll float straight away, otherwise you'd have add the specific class names:
#box1, #box2, #box3, #box4 {
float:left;
}
Related
There is a large white gap between the first row of columns and the second row.
JSFiddle: https://jsfiddle.net/5o3ug26g/
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style>
.content {
margin-left: 170px;
margin-right: 170px;
}
.sidebar { width: 160px; height: 600px; }
.left { float: left; background: forestgreen; }
.right { float: right; background: steelblue; }
</style>
</head>
<body>
<div>
<div class="left sidebar"></div>
<div class="right sidebar"></div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Text on top of the page</div>
<div class="col-md-6">Other text on top of the page</div>
</div>
<div class="row">
<div class="col-md-6">I want this to be right below the "Text on top of the page" but it isn't...</div>
<div class="col-md-6">... and I want this to be right below the "Other text on top of the page" but it isn't</div>
</div>
</div>
</div>
</div>
</body>
</html>
If I remove the row classes then the gap disappears, but this problem appears also when using Bootstrap navbar-s and other containers with :after { display: table; }, so just removing the row classes is not a solution.
I tried adding clearfix in a bunch of places but to no avail.
This is an extract from a more complex responsive layout and I'd rather avoid refactoring it all.
What is the easiest fix?
You can position your left and right sidebars absolutely instead of floating them. The floats are interfering with the bootstrap layout.
.left { background: forestgreen; position:absolute; left:0; top:0; }
.right { background: steelblue; position:absolute; right:0; top:0;}
Live example forked from yours: https://jsfiddle.net/5fk5900s/1/
Marcelo is correct. You've already added margins to the content to account for the side bars. Here is a fiddle with the absolute positioning changes:
https://jsfiddle.net/5o3ug26g/1/
.content {
margin-left: 170px;
margin-right: 170px;
}
.sidebar {
position: absolute;
width: 160px;
height: 600px;
}
.left {
left: 0px;
background:
forestgreen;
}
.right {
right: 0px;
background: steelblue;
}
I have two divs that I've placed inside another div:
<div id="outer_div">
<div id="left_div">
<!-- Buttons and text field -->
</div>
<div id="right_div">
<!-- Buttons and drop list -->
</div>
</div>
My style sheet includes the following:
#left_div {
float:left;
}
#right_div {
float:right;
}
Now, when I do this, I expect that the left and right div will be on the left and right of the screen, respectively, and that they will be aligned horizontally as well. The first holds true, however, the second hope is not true. If I put left_div above right_div, the right_div buttons and drop list are on a line below the left_div. If I put right_div above left_div, the divs are almost in line, but the right div is slightly elevated, so that it overlaps a div that is above it.
Try setting a width to your outer_div
#outer_div {
width: 100%; //or whatever width you would like it to be
}
#left_div, #right_div {
width: 50%;
}
here is a sample that works fine for me.
<div id="outer_div">
<div id="left_div">
<div class="button"></div>
<div class="button"></div>
</div>
<div id="right_div">
<div class="button"></div>
<div class="button"></div>
</div>
</div>
and css
#outer_div
{
overflow: hidden;
width: 450px;
background: yellow;
}
#left_div {
float:left;
width:200px;
height: 200px;
border: thin red solid;
}
#right_div {
float:right;
width:200px;
height: 200px;
border: thin blue solid;
}
.button {
width: 75px;
height: 25px;
margin: 5px;
border: thin green solid;
}
and the fiddle: http://jsfiddle.net/cMhpK/
when I'm resizing my browser-window the blue buttons go below the logo on the left, on the same line as the text "Welkom Bart" although they are two different layers. I want the text "Welkom Bart" to lower as well, so they are not on the same line. What do I need to add to my css?
html e.g.
<div id="mainmenu">
<div id="logo"><img ... /></div>
<div id="usermenu">Buttons</div>
</div>
<div id="maintitle">
<h2>Welkom Bart</h2>
<hr />
</div>
css
#mainmenu {
height: 100px;
position: relative;
}
#logo {
float: left;
width: 200px;
margin-right: 20px;
}
#usermenu {
float: right;
}
#maintitle {
margin-bottom: 20px;
}
#maintitle hr {
color: #56c2e1;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #56c2e1;
margin: 10px 0;
}
Add clear:both to #maintitle =)
Add overflow:hidden to #mainmenu. This will cause its height to include all floated elements, such as your #usermenu element, allowing flow to continue underneath it.
Use this
<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />
I have a HTML page with content divided into left and right part using CSS. The height of left content in smaller than the right content. Hence the right content div goes below to the left content div also. Eventually the border of right content is not a straight line.
How can we avoid the creeping of the right content towards the left?
How can we make the height of left content increased till the height of right content (with javascript)?
<html>
<head>
<title>My Page</title>
<style type="text/css">
.myContent {
width: 100%;
}
.myHeader {
}
.leftPart {
border: 1px solid blue;
width: 200px;
clear: left;
float: left;
background-color: red;
}
.rightPart {
border: 1px solid orange;
width: 100%;
background-color: beige;
}
</style>
</head>
<body>
<header>
<div class="myHeader">
H
</div>
</header>
<div id="body">
<div class="myContent">
<div class="leftPart">
A
</div>
<div class="rightPart">
<div >
<label for="Sales_and_Marketing">Sales and Marketing</label>
<input id="SalesAndMarketing" name="SalesAndMarketing" type="text" value="" />
</div>
<div >
<label for="Sales_and_Marketing">Sales and Marketing</label>
<input id="Text1" name="SalesAndMarketing" type="text" value="" />
</div>
</div>
</div>
</div>
</body>
</html>
fLoat one element, set margin to the other one.
.leftPart {
border: 1px solid blue;
width: 200px;
float: left;
background-color: red;
}
.rightPart {
margin-left: 200px;
border: 1px solid orange;
background-color: beige;
}
JSBin Demo
Update #1
If you consider using JavaScript, you might want to take a look at equalize.js.
equalize.js is a jQuery plugin for equalizing the height or width of HTML elements.
Here is an example:
// Equalize the height of div element children
$('.myContent').equalize({children: '> div'});
Here is the JSBin Demo.
Update #2
If you're looking for a pure CSS solution, you can use display: table-cell; CSS declaration.
But, honestly, I'd prefer using JavaScript rather than this, because using table display types, may change behavior of web browser while rendering the page (browsers may consider the entire page as a table):
#body { display: table; width: 100%; }
.myContent { display: table-row; }
.leftPart {
width: 200px;
display: table-cell;
}
.rightPart {
display: table-cell;
}
Here is the JSBin Demo
Add this style:
.rightPart {
margin-left: 200px;
}
I'd like to put two columns on the side of the content div. The part I have problems with is that I want the columns being built from 3 parts. The top and bottom should have fixed heights, but the middle one would adjust depending on the content height. Look at the sample with one column:
<html>
<head>
<style>
* { border: 1px solid black;}
#contentWrapper { width:450px; }
#leftColumn { width:100px; float: left; }
#leftColumnTop { width:100px; height:50px;
background-color: gray; }
#leftColumnMiddle { background-color: red; }
#leftColumnBottom { width: 100px; height:50px;
background-color: gray; }
#content { width: 300px; float: left; }
#footer { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumn">
<div id="leftColumnTop"> </div>
<div id="leftColumnMiddle"> </div>
<div id="leftColumnBottom"> </div>
</div>
<div id="content">content<br> here <br>more
<br>more <br>more <br>more <br>more
<br>more <br>
</div>
<div id="footer">footer text</div>
</div>
</body>
</html>
What I want is the #leftColumnBottom stick at the top of the footer and red #leftColumnMiddle to fill the space between top and bottom part.
This works in everything except IE6; for that you'll need a conditional comment and css expression to set a height instead of bottom on #leftColumnMiddle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style>* { border: 1px solid black;}
#contentWrapper { position: relative; float:left; width: 450px; }
#leftColumnTop { position: absolute; width: 100px; height: 50px; left: 0; background-color: gray; }
#leftColumnMiddle { position: absolute; width: 100px; top: 50px; bottom: 50px; left: 0; background-color: red; }
#leftColumnBottom { position: absolute; width: 100px; height: 50px; left: 0; bottom: 0; background-color: gray; }
#content { width: 300px; float: left; margin-left: 100px;}
#footer { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumnTop"> </div>
<div id="leftColumnMiddle"> </div>
<div id="leftColumnBottom"> </div>
<div id="content">content<br>
here<br>more<br>more<br>more<br>more<br>more<br>more<br>
</div>
</div>
<div id="footer">footer text</div>
</body>
</html>
And to the commenter - it nearly worked, so that's why. ;)
try min-height for the one that needs to grow
If you need both columns to be of equal height, and work in IE6, you basically have to hack.
A solution I've used in the past involves setting up a fake margin/padding for one of the columns. This assumes that you know a upper limit of how large the columns can grow (could be in the magnitude of several thousand px's).
This solution is outlined here.
Quoting from the page I linked:
The basic method works like this:
Blocks which will act as columns must be wrapped in a container element
Apply overflow: hidden to the container element
Apply padding-bottom: $big_value [2] to the column blocks, where $big_value is a large enough value to guarantee that it's equal to or larger than the tallest column
Apply margin-bottom: -$big_value to the column blocks