I have a three div block inside main div which is head,content and footer.
I have facing few problems which are:
(1) images not fiting inside div
means i am try to find code for this situation:
<div style="height:10%">
<img src="abc.jpg" height="100%">
</div>
and
(2) I have a div which height is 80%,in this div i put three div their height is 20%, 60%, 20%.the div whose height is 60% has no data i write it for margin.(means first div 20% height has a data then 60% height for space then another div who has a data), so how to achive it?
(if possible please suggest without using margin-up or bottom
HTML code:
<div class="homebackground" style="height:100%; width:100%; background-image:url(../../stylesheets/images/Logo_with_Blu_bg.png); background-size:98% 88%">
<div class="bodyhead">
<img src="../../stylesheets/images/user_male.png"/>
</div>
<div style="height:80%">
<div style="width:100%">
<div class="mainbodyup" align="right">
<img src="../../stylesheets/images/phone.png"/>
</div>
<div class="mainbodyup"> </div>
<div class="mainbodyup">
<img src="../../stylesheets/images/groupchat.png"/>
</div>
</div>
<div style="height:60%; clear:both;" class="a">
<div class="mainbodymid"></div>
<div class="mainbodymid"></div>
<div class="mainbodymid"></div>
</div>
<div style="width:100%">
<div class="mainbodybot" align="right">
<img src="../../stylesheets/images/recent.png"/>
</div>
<div class="mainbodybot"> </div>
<div class="mainbodybot">
<img src="../../stylesheets/images/search.png"/>
</div>
</div>
</div>
<div style="height:10%;">
</div>
</div>
CSS:
.bodyhead
{
height:10%;
}
.bodyhead img
{
width: 10%;
}
.mainbodyup
{
height:20%;
width:33%;
float:left;
}
.mainbodyup img
{
width: 20%;
}
.mainbodymid
{
width:33%; float:left; padding:0px;
}
.mainbodybot
{
height:20%;
width:33%;
float:left;
}
.mainbodybot img
{
width: 20%;
}
.a:before
{
display: table;
content: " ";
}
.a:after
{
clear:both;
display: table;
content: " ";
}
If you want to fit the entire image in the div . try using
style="background:url('image-url') no-repeat; background-size: 100%;"
for the div which contains the Image . Rather using the image object .
style="background:url('image-url') no-repeat; background-size: contain;"
Use this code.
add one css to your existing stysheet
html, body{
height: 100%;
}
Related
I'm using bootstrap and my site is a responsive site.
In a row I'm having 2 divs. One is for the responsive tabs and the other is for the main content. The main content is dynamic. So the content is loaded in to this div once only at the start. The responsiveness is based on the width of the divs (not height).
My issue: I want the height of these two divs to be based on the 'dynamic content DIV height.
html:
<div class = "row">
<div class = "col-md-8 classA">
<div class="classB">
<div class="classC">
<div class="classD"></div>
<div class="classD"></div>
</div>
</div>
</div>
<div class="col-md-4 classA">
<div class="responsive-tabs"></div> <!-- bootstrap's responsive tabs -->
</div>
</div>
css:
.classA{
width: 300px;
min-height:100px;
}
.classB {
position:absolute;
width: 100%;
}
.classD{
position: absolute;
}
#media only screen and (min-width : 1224px) {
.classC{
width: 75%; /*responsiveness is based on the width here*/
height: auto; /*I think this is where the issue is?*/
}
}
A sample Fiddle
This is how it is at the moment (based on the responsive tab height):
This is what I expect it to be (to be based on the dynamic content height):
Basically if you are using jquery the answer will be the following:
Working example: Bootply Link
HTML
<div class="row" id="thedivs">
<div id="B" class="col-md-6 col-lg-6 col-sm-6">BBB
<div id="C">CCCCCC</div>
BBBB<br>
bbbbbbdsbdbsdbsbdbsbsd
</div>
<div id="D" class="col-md-6 col-lg-6 col-sm-6">DDD
<div id="A">AAAAA</div>
DDD
</div>
</div>
CSS
#A{
background-color: orange;
}
#B{
background-color: red;
}
#C{
background-color: blue;
}
#D{
background-color: green;
height:inherit;
}
#thedivs{
height:100%;
}
Use JQuery to find height of parent and set the child's height to parent's height
Javascript
$(function() {
$('#thedivs').find('#D').css('height', $('#thedivs').innerHeight());
});
for row you should use relative after that you can achieve it
Example
HTML
<div class="row">
<div class="aclass">A</div>
<div class="bclass">b</div>
</div>
CSS
.row{
position:relative;
max-width:600px;
background-color:#00ff00;
}
.aclass{
float:left;
width:48%;
height:580px;
background-color:#ff0000;
}
.bclass{
position:absolute;
width:48%;
right:0;
top:0
background-color:#0000ff;
}
I found this jQuery animate script -> http://jsfiddle.net/steweb/dsHyf/ which works perfectly fine for me when I try it standalone. But as soon as I want to include it into my responsive layout using display: table-cell and %-widths everything looks out of place.
I want the .full to fill out 100% of the width and height of the .cell.
Is it possible to adjust this to fluid layouts instead of fixed widths? I have been trying for hours... Or is there a better solution?
I simply want to exchange a first "tile" showing a headline with a second "tile" showing a text/list with a smooth animate effect.
Plus I want to use this script multiple times on the same pages. What can I do?
HTML:
<div class="container">
<div class="sidebar">
<h1>Text</h1>
</div>
<div class="cell">
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
</div>
<div class="cell">
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
</div>
</div>
CSS:
#wrapper{
width:100%;
overflow:hidden;
position:relative;
height:100%;
}
.full{
position:absolute;
width:100%;
height:100%;
}
#div1{
background:#FF0000;
left:0px;
}
#div2{
display:none;
background:#FFFF00;
}
.container{
display: table;
width: 100%;
}
.cell{
display: table-cell;
}
div.container div:nth-child(1){
width: auto;
}
div.container div:nth-child(2), div.container div:nth-child(3){
width: 40%
}
JS:
$('#div2').css('left',-$('#wrapper').width()).show();
$('#div1').click(function(){
$(this).animate({'left':$('#wrapper').width()});
$('#div2').animate({'left':0});
});
$('#div2').click(function(){
$(this).animate({'left':-$('#wrapper').width()});
$('#div1').animate({'left':0});
});
How would i make my middle div take the remaining space left in width, but still staying in its place beside the 2 other divs?
Also if i remove either of the 2 divs on the sides, the main div should just take what space there is left?
Code:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
http://jsfiddle.net/U3Hr5/2/
My suggestion is using a table since you want all of them to be on the same row but with their own heights.
Html:
<div class="row-fluid">
<table style="width: 100%">
<tr>
<td class="sidebar">1</td>
<td class="content-box">2</td>
<td class="sidebar">3</td>
</tr>
</table>
Css:
.sidebar {
width:225px;
background-color:blue;
}
.content-box {
background-color:red;
}
Here is the fiddle edit:
http://jsfiddle.net/mDpEX/
//Flipbed
If you don't want to use table for layout, you can make use of css3 display table, table-cell properties,
#container {
display: table;
width: 100%;
}
#left, #middle, #right {
display: table-cell;
height: 100px;
}
#left, #right {
width: 150px;
background: green;
}
#middle {
background: gray;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
jsfiddle
More on css display properties
I assume you want something like this.
The HTML:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
The CSS:
.sidebar {
float:left;
width:225px;
background-color:blue;
}
.content-box {
clear:left;
background-color:red;
width:225px;
}
Hope this helps.
Actually i didn't get your question correctly. If you are looking to align your div on to the remaining space after your first div ie after sidebar div simply put width of content-box as 50%(or the size you want).
It depends upon how much you want the layout to respond to resizing without using JavaScript and what browsers you're trying to cater for. If your layout is essentially static and you just want to respond to width changes then you can use something like this.
http://jsfiddle.net/U3Hr5/4/
HTML
<div class="row-fluid">
<div class="span12">
<div class="left sidebar">1</div>
<div class="content-box">2</div>
<div class="right sidebar">3</div>
</div>
</div>
CSS
.span12 {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
width: 225px;
background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
margin-left: 225px;
margin-right: 225px;
background-color:red;
}
You can try something like this http://jsfiddle.net/kKGVr/
Basically, if you don't wrap the content in a containing div it will expand to fill the available space - you can test this by removing the divs called #left or #right. This will also allow you to add a footer because no absolute positioning is used.
It will fall down, however, if the central column becomes longer than the side columns... solution? Not sure, perhaps use javascript to adjust the height of the side columns so they are always at least as long as the central column.
HTML:
<div id="wrapper">
<div id="right">...</div>
<div id="left">...</div>
content here
</div>
and CSS:
#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}
Sorry guys for the really simple question but I have tried to float one div left and one right with predefined widths along these lines
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Although this 'mostly' works it seems to mess up the other elements on the page below it.
So what is the correct why to split a HTML page vertically into two parts using CSS without effecting other elements on the page?
you can use..
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
<div style="clear:both"></div>
now element below this will not be affected.
Just add overflow:auto; to parent div
<div style="width: 100%;overflow:auto;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Working Demo
I guess your elements on the page messes up because you don't clear out your floats, check this out
Demo
HTML
<div class="wrap">
<div class="floatleft"></div>
<div class="floatright"></div>
<div style="clear: both;"></div>
</div>
CSS
.wrap {
width: 100%;
}
.floatleft {
float:left;
width: 80%;
background-color: #ff0000;
height: 400px;
}
.floatright {
float: right;
background-color: #00ff00;
height: 400px;
width: 20%;
}
There can also be a solution by having both float to left.
Try this out:
Working Demo
P.S. This is just an improvement of Ankit's Answer
Check out this fiddle:
http://jsfiddle.net/G6N5T/1574/
CSS/HTML code:
.wrap {
width: 100%;
overflow:auto;
}
.fleft {
float:left;
width: 33%;
background:lightblue;
height: 400px;
}
.fcenter{
float:left;
width: 33%;
background:lightgreen;
height:400px;
margin-left:0.25%;
}
.fright {
float: right;
background:pink;
height: 400px;
width: 33.5%;
}
<div class="wrap">
<!--Updated on 10/8/2016; fixed center alignment percentage-->
<div class="fleft">Left</div>
<div class="fcenter">Center</div>
<div class="fright">Right</div>
</div>
This uses the CSS float property for left, right, and center alignments of divs on a page.
Alternatively, you can also use a special function known as the linear-gradient() function to split browser screen into two equal halves.
Check out the following code snippet:
body
{
background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}
Here, linear-gradient() function accepts three arguments
90deg for vertical division of screen.( Similarly, you can use 180deg for horizontal division of screen)
lightblue color is used to represent the left half of the screen.
skyblue color has been used to represent the right half of the split screen.
Here, 50% has been used for equal division of the browser screen. You can use any other value if you don't want an equal division of the screen.
Hope this helps. :)
Happy Coding!
Here is the flex-box approach:
CSS
.parent {
display:flex;
height:100vh;
}
.child{
flex-grow:1;
}
.left{
background:#ddd;
}
.center{
background:#666;
}
.right{
background:#999;
}
HTML
<div class="parent">
<div class="child left">Left</div>
<div class="child center">Center</div>
<div class="child right">Right</div>
</div>
You can try the same in js fiddle.
So, i have some block, and this block must contains two divs, first div must be at left(attached to block), second at right(attached to block), and this two divs must coverage all block size.
<div id="block" style="width:800px">
<div id="left" style="float:left;width:50%;"> left </div>
<div id="right" style="float:right;width:50%;"> right</div>
</div>
Both divs have a width half of the parent's div.
But you have to be careful with borders as the width defines the width of the content (i.e. without borders). So if you use borders, the right box will be shown below the left, but still on the right side.
You would do it like this.
<div id="block">
<div id="left"></div>
<div id="right"></div>
</div>
The css would be
#block {
width:800px;
display:block //not sure if this line is required or not
}
#left {
width:400px;
float:left;
}
#right {
width:400px;
float:left;
}
There are many ways this could be done.... here's one:
<div style="position: relative; width: 100%; ">
<div style="position: absolute; left: 0; width: 50%; ">
<p>Content</p>
</div>
<div style="position: absolute; right: 0; width: 50%; ">
<p>Content</p>
</div>
</div>
Would something like this do what you want?
<div id="container">
<div id="leftside" style="width:100px; float:left">
Left Side
</div>
<div id="rightside" style="margin-left: 100px;">
Right Side
</div>
</div>
You may need to tweak the margin-left depending on the padding (and widths obviously). This is an easy way to get the two column approach (even if the two columns is a small box) :)
Or in the interests of separating the HTML and CSS, the same code represented again in two parts :) :
HTML
<div id="container">
<div id="leftside"></div>
<div id="rightside"></div>
</div>
CSS
#container:
{
/* insert any requires styles here :) */
}
#leftside:
{
width: 100px;
float: left;
}
#rightside:
{
margin-left: 100px;
}
Try this:
<div id="container">
<div id="left">
Some Content
</div>
<div id="right">
Some Content
</div>
</div>
CSS:
<style type="text/css">
#container
{
width:500px;
height:500px;
position:relative;
}
#left
{
width:250px;
height:250px;
position:absolute;
float:left;
}
#right
{
width:250px;
height:250px;
position:absolute;
float:right;
}
</style>
Adjust margin and width and you're done.
<div id="main">
<div id="left" style="float:left">
Content Left
</div>
<div id="right" style="float:right">
Content Right
</div>
</div>