Salam (means hello) :)
I have the following simple layout, the problem is that adding content to right div makes content on left one come down:
JS Fiddle
<!DOCTYPE html>
<html>
<head>
<style>
.parent{
width:800px;
height:100px;
display: inline-table;
border: 1px solid #e8e8e8;
background: #fcfcfc;
}
.parent .right{
width:90px;
display:table-cell;
padding-top: 10px;
text-align: center;
background: #f5f5f5;
color:#666666;
}
.parent .left{
width:710px;
display:table-cell;
padding-top: 0px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
This cell has padding-top:0px
</div>
<div class="right">
<img src="images/icon.png">
<br>some text
</div>
</div>
</body>
</html>
Since you have this property display:table-cell the content inside is been vertical aligned, for default with baseline , see more here.
You can replace this value with top or middle:
.left, .right {
vertical-align:middle;
}
The demo http://jsfiddle.net/Svdm4/2/
Related
I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!
Any help would be appreciated, thank you! :)
Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
It's already working for the snippet you showed. I just put a background color on the div.form so you could see.
In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.
Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
You can also place 2 divs side by side using display:inline-block on the two divs.
(If you want it responsive, define the width of the child with % and not pixels.)
.child1 {
background:#082a46;
}
.wrapper {
border: 1px solid #ccc;
}
.blurb {
color: #fff;
background-color: blue;
width:200px;
height:400px;
display:inline-block;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
display:inline-block;
}
<div class="child1">
<div class="wrapper">
<div class="blurb"></div>
<div class="form"></div>
</div>
</div>
I want to show two divisions side by side. I have tried a few possible solutions, but they still overlap. Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Use float:left; Learn about CSS float Property
.sidebar
{
width:150px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:200px;
background:silver;
color:red;
padding:50px;
float:left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
float:left;
padding:50px;
}
.content
{
width:200px;
background:silver;
color:red;
float:left;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
I think do you mean just display two div in one row is it right so it is just simple add float:left in first div it will solve your issue.
Like :
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Just added main parent to both div and used display:inline-flex to it.
.main{
display:inline-flex;
}
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
<div class="main">
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
adding float:left to both div will fix the issue.
css code:
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
}
html code:
<div>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
and if one of your div is going down then you must adjust your div's width.
Apply a float:left to the widgets
To solve this problem :
You should add this code to .content and to .sidebar
Add float:left...
This should help
http://www.w3schools.com/cssref/pr_class_float.asp..
glad to help you
Since div is a block level element, so it will occupy 100% width of its immediate parent. Because of it, one cannot place them in a horizontal manner without making use of float - a very useful CSS property.
So in your CSS you should add the property as below, to get the desired result:
.sidebar {
float: left;
}
Watch the demo here.
To get more information about float, one can always Google, as it is an ocean of knowledge.
use CSS float Property
float: none|left|right|initial|inherit;
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float: left;
}
.content {
width: 200px;
background: silver;
color: red;
padding: 50px;
float: left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
I am trying to make an html page with 2 divs : "top" and "main"
The top <div> must take the place of its contained elements, the main <div> must take all the remaining place.
Here is what I tried:
CSS CODE :
html,body{
height:100%;
}
#top{
background-color : red;
padding:10px;
border:1px solid;
}
#main{
background-color : blue;
height:100%;
padding:10px;
border:1px solid;
}
#content1{
background-color:yellow;
}
#content2{
background-color:yellow;
height :100%;
}
HTML CODE:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="top">
<div id="content1">content1</div>
</div>
<div id="main">
<div id="content2">content2</div>
</div>
</body>
</html>
Here is the jsFiddle
As you can see, the "100%" I set on "content2" causes this div to take 100% of the page height instead of just the remaining space. Is there a magic css property to fix this?
EDIT:
Thank you for all your solutions.
I finally chose the solution proposed by Riccardo Pasianotto based on CSS properties display:table and display:table-row.
Here is my final HTML CODE:
<!DOCTYPE html>
<body>
<div id="content1" class="row">
<div class="subcontent">
<div class="subContentContainer">
content1
</div>
</div>
</div>
<div id="content2" class="row">
<div class="subcontent">
<div class="subContentContainer">
content2
</div>
</div>
</div>
</body>
Here is the corresponding CSS CODE:
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
}
body{
display:table;
}
.row{
display:table-row;
width:100%;
}
#top{
height:100px;
}
#content1{
background:#aa5555;
padding:10px;
}
#content2{
background:#5555AA;
height:100%;
}
.subcontent{
padding : 10px;
height:100%;
}
.subContentContainer{
background-color:yellow;
height:100%;
}
And here is the corresponding Jsfiddle.
DEMOJF
For doing this you have to use display:table so edit in that way
html,
body {
height: 100%;
width: 100%;
}
body {
display: table;
}
.row {
display: table-row;
width: 100%;
background: red;
}
#top {
height: 100px;
}
#content1 {
background: yellow;
height: 100%;
}
#content2 {
overflow: scroll;
height: 100%;
border: 1px solid black;
}
<body>
<div id="top" class="row">
<div id="content1">content1</div>
</div>
<div id="main" class="row">
<div id="content2">content2</div>
</div>
</body>
What I often do is making a container without padding to min-height: 100% and let my content have its proper height (auto) :
This will make something like this :
#container {
background-color : #5555AA;
min-height: 100%;
}
#content2 {
background-color:yellow;
margin: 10px;
}
http://jsfiddle.net/5cEdq/25/
I don't know if this is exactly what you want, but you can't make a div just "fill the remaning space" without making it absolute. What you don't really want either.
try this:
http://jsfiddle.net/5cEdq/16/
CSS :
html,body{
height:100%;
Padding:0;
margin:0;
border:0;}
Since both Divs are using 100% height set on the html and body tag you only need to set it there then zero your margin and padding. Generally if you have to set a div and its parent div both to 100% height you're overdoing it.
Is there a magic css property to fix this?
Yes there is. It's called box-sizing
Read this article for more info about the box-sizing property.
FIDDLE
So if your header was say 64px high, then you'd do something like this:
.container {
height: 100%;
background: pink;
margin-top: -64px;
padding-top: 64px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<header>header</header>
<div class="container">
<div class="content">
content here
</div>
</div>
I have two div (children inside a div) say div1 and div2. div1 has a fixed width, but div2 occupies all the remaining space (width).
If the div (parent div) has width of 100% i.e. not fixed width, then how should I style div2 such that it takes all the remaining space of div and they appear side by side?
EDIT::
body{ padding: 0; margin: 0; font:0.9em arial,verdana,tahoma,helvetica,sans-serif;}
#wrap{ widht: 100%;}
#header{ width: 100%; background: black; height: 100px; margin-bottom: 20px;}
#navigation{ width: 170px; height: 500px; float: left; margin-left: 20px;padding: 0 20px; border-right: solid 1px #CCCCCC;}
#bodywrap{width: 100%; float: left;}
#body{ min-height: 500px; margin-left: 20px; }
#footer{ width: 100%; height: 60px; background: black; float: left; margin-top: 20px; }
by html code is
<div id="wrap">
<div id="header">
</div>
<!-- end of header -->
<div id="bodywrap">
<div id="navigation">
</div>
<div id="body">
</div>
</div>
<!-- end for body -->
<div id="footer">
</div>
<!-- end of footer -->
</div>
and I want body to take all remaining space left by navigation.
try this
HTML
<div class="prnt">
<div class="fl div1">
--div1 --
</div>
<div class="fl div2">
-- div2 --
</div>
</div>
CSS
.prnt{
padding-left:100px;
}
.fl{
float:left;
height:100px
}
.div1{
width:100px;
margin-left:-100px;
background:#f00
}
.div2{
width:100%;
background:#0f0
}
my solution is the following:
css
#container {width:100%; height:200px;}
#first {width:100px; height:100%; background:black; float:left;}
#second {height:100%;width:auto; background:blue; margin-left:100px;}
html
<div id="container">
<div id="first"></div><div id="second"></div>
</div>
Live example: http://jsbin.com/erure4
The first div has a fixed width of 100px and is floated left. This make the second div to stick near it. The second div will normally get all the width override the first div, for this reason it needs to give a margin-left:100px; (the width of the first div).
I'd say, if I understood you correctly, that this should be it:
<html>
<head>
<title>test div</title>
<style type="text/css">
#wrapper {
width: 100%;
}
#left {
width: 200px;
float: left;
background-color: #dddddd;
}
#right {
background-color: #cccccc;
margin: 0 0 0 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">fixed left</div>
<div id="right">stretched right</div>
</div>
</body>
</html>
added margin to assist Chris' issues with the first draft..
I'm guessing here: try adding padding-left: 230px to #body.
How to create two boxes (floating side by side) of same height.
I want to create boxes of height 40% of the container/window?
See the Example Here
If that is what you are looking for, here is more:
CSS:
#parent{
width:205px;
height:200px;
border:1px solid #000000;
overflow:auto;
}
#child1{
height:40%;
background:#00ff00;
float:left;
}
#child2{
height:40%;
background:#0000ff;
float:left;
}
The Important Points:
The float:left is used to align the two boxes side-by-side
The height is specified in % for both child boxes so that they inherit from their parent.
HTML:
<div id="parent">
<div id="child1">
This is first box
</div>
<div id="child2">
This is second box
</div>
</div>
This should be a simple solution for you. Here's my example:
jsfiddle
HTML:
<div class="wrap">
<div class="left">
Content
</div>
<div class="right">
More content
</div>
</div>
CSS:
.wrap
{
width: 400px;
height: 500px;
border: 1px solid #000;
}
.left, .right
{
float: left;
width: 45%;a
height: 40%;
margin: 2%;
}
.left
{
border: 1px solid #f00;
}
.right
{
border: 1px solid #00f;
}
Using a % as height is relative to your parent container's height. Therefore you need to declare the height of your parent container. Take a look at this tutorial: Equal Height Columns.
The question specifically mentions floating, and there have been several good answers for that, but I thought it might be worth posting an answer that doesn't use floats in case the the mention of floating was accidental:
.wrapper {
width: 400px;
height: 400px;
outline: 1px solid #000;
}
.wrapper div {
display: inline-block;
width: 198px;
height: 40%;
background: #66c;
}
.wrapper div:first-child {
background: #6c6;
}
<div class="wrapper">
<div>This is the first box</div>
<div>This is the second box</div>
<p>Some other content</p>
</div>
It doesn't currently work in WebKit, but I assume that's a bug and there'll be a workaround, I am investigating. If you need it to work in IE < 8 add a conditional comment:
<!--[if lt IE 8]>
<style>
.wrapper div { zoom:1; *display:inline;}
</style>
<![endif]-->