this is my code :
<!DOCTYPE>
<html>
<body>
<div class="main">
<div id="div1" style="float: left;height: 200px;border:1px solid red; ">1</div>
<div style="clear:both"></div>
<div id="div2" style="border:1px solid red;margin-top:20px;background-color: #FFF; ">2</div>
</div>
</body>
</html>
in Chrome margin-top is enabled , div1 and div2 Apart 20px;
but in IE8 , div1 and div2 are always keep together。
you can float:left in second div too.
and with adding a div in the second div you can disable aspects of floated div check http://jsfiddle.net/SzgGz/3/
HTML:
<div class="main">
<div id="div1" style="float: left;height: 200px;border:1px solid red; ">1</div>
<div style="float:left; clear:both"></div>
<div id="div2" style="margin-top:20px; float:left; width:100%;"><div style="border:1px solid red;background-color: #FFF;">2</div></div>
</div>
Related
I am creating a website structure with the help of bootstrap.
The problem is while arranging 3 div tags in 1 main div tag, they are not arranging side by side.
They themselves get arranged one below another.
<div class="col-md-12 collapse" style="border:1px solid blue;" id="part1">
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.1</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.2</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.3</h5></div>
</div>
I want to arrange the 3 div tags one beside another.
You need to wrap a row around your columns.
<div class="col-md-12 collapse border-solid border-blue" id="part1">
<div class="row">
<div class="col-md-4 border-solid border-green"><h5>Part 1.1</h5></div>
<div class="col-md-4 border-solid border-green"><h5>Part 1.2</h5></div>
<div class="col-md-4 border-solid border-green"><h5>Part 1.3</h5></div>
</div>
</div>
Please do not use inline css, consider adding classes instead.
.border-solid {
border-style: solid;
border-width: 1px;
}
.border-blue {
border-color: blue;
}
.border-green {
border-color: green;
}
Remove Collapse
<div class="col-md-12" style="border:1px solid blue;" id="part1">
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.1</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.2</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.3</h5></div>
</div>
.col-md-4 {
display: inline-block;
}
jsfiddle
<div style="width: 100%;">
<div style="float:left; width: 20%">left<hr width="1" size="500">
</div>
<div style="float:none;">middle<hr width="1" size="500">
</div>
<div style="float:right;">right
</div>
Sorry if the title is confusing. I have included a screenshot of my issue to make it more clear.
Essentially, I want the green-bordered div to be directly underneath the red-bordered div without the blue-bordered div interfering.
Here is my HTML code (I am using Bootstrap v3.3.7)
<div class="container appParent">
<div class="row">
<div class="col-md-6" id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div class="col-md-6" id="songs-added">
<app-songs-added></app-songs-added>
</div>
</div>
<div class="row">
<div class="col-md-6" id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
</div>
My CSS is only putting the borders around the div. Everything else is bootstrap.
#song-view{
border: 2px solid red;
}
#songs-added{
border: 2px solid blue;
}
#playlist-form{
border: 2px solid green;
}
In this case, use pull-right, and keep all of the col- in a single row.
<div class="container appParent">
<div class="row">
<div class="col-md-6" id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div class="col-md-6 pull-right col-xs-12" id="songs-added">
<app-songs-added></app-songs-added>
</div>
<div class="col-md-6" id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
</div>
http://www.codeply.com/go/189ofQG5Sj
You can re-arrange your HTML.
#song-view {
border: 2px solid red;
height: 100px;
margin-bottom: 30px;
}
#songs-added {
border: 2px solid blue;
height: 150px;
}
#playlist-form {
border: 2px solid green;
height: 100px;
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container appParent">
<div class="row">
<div class="col-md-6">
<div id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
<div class="col-md-6">
<div id="songs-added">
<app-songs-added></app-songs-added>
</div>
</div>
</div>
</div>
You can simple use min-heights and surround the containers and rows with a div for extra styling. You can check this example I quickly made: JsFiddle
<div class="song-list">
<div class="row">
<div class="container">
<div class="col-md-6" id="song-view">
Song View
</div>
<div class="col-md-6" id="songs-added">
Songs Added
</div>
</div>
</div>
</div>
<div class="playlist">
<div class="row">
<div class="container">
<div class="col-md-6" id="playlist-form">
Playlist Form
</div>
</div>
</div>
</div>
CSS:
.song-list #song-view {
border:1px solid blue;
min-height:300px;
}
.song-list #songs-added {
border:1px solid red;
min-height:500px;
}
.playlist #playlist-form {
border:1px solid green;
}
I am trying to make the <div> with class col-md-6 to be always positioned in the right end of the row even while scrolling horizontally.Here is an illustration.
<div class="row">
<div id="div1" class="col-md-6">.col-md-6</div>
<div id="div2" class="col-md-6">.col-md-6</div>
</div>
<div class="test">LARGER DIV
</div>
When we scroll horizontally i want div2 to remain in the last 6 columns of the window Which is not happening.The div itself is going out of the view.
Can you please specify or give some references to achieve this?I'm using Bootstrap-v3.3.0
You can set the second div to absolute position, and make it keeps the right always at the border of the screen using some jQuery.
CSS:
[class*="col-"] {
background: #F2FAFF;
border: 0px solid #B1D8ED;
display:inline-block;
}
.test{
width:2000px;
background: #F2F79F;
border: 0px solid #B1D8ED;
}
#fixed{
position:absolute;
}
HTML:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div id="fixed" class="col-md-6">.col-md-6</div>
</div>
<div class="test">
LARGER DIV
</div>
Javascript:
$(window).scroll(function(){
$('#fixed').css('right', $(this).scrollLeft() * -1);
});
Example:
http://www.bootply.com/yeKqMVA91r
Why not just wrap the larger div in a scrollable element like so:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-12" style="overflow:scroll;">
<div class="test">LARGER DIV</div>
</div>
</div>
I have a responsive <div> element placed in between two fixed <div> elements. I've tried the following code:
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="width: auto">
<div style="float: left; width:270px; background-color: green">Fixed div</div>
<div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
<div style="background-color: red" class="row">Responsive div</div>
</div>
</body>
</html>
Currently the responsive <div> element is taking the whole screen. When I try to checkout the width and height, it has acquired my entire main <div>. Is there any approach where I can put this responsive <div> inside 2 fixed <div>?
Check below code: Here I have altered Div sequence and change display style of the three.
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="display:table; width:100%">
<div style="display:table-cell; width:270px; background-color: green">Fixed div </div>
<div style="background-color: red; display:table-cell;"> Responsive div </div>
<div style="display:table-cell; width: 120px; background-color: yellow"> Fixed div</div>
</div>
</body>
</html>
Since you got their div widths already, we can took advantage of the calc
width: calc(100% - 390px);
The 390px value is the sum of the width of left and ride side elements.
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="width: auto">
<div style="float: left; width:270px; background-color: green">Fixed div </div>
<div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
<div style="background-color: red; width: calc(100% - 390px);margin-left: 270px;" class="row"> Responsive div </div>
</div>
</body>
</html>
Try with this:
<body style="display:table;width:100%;">
<div style="float: left; width:270px; background-color: green;display:table-cell;">Fixed div </div>
<div style="background-color: red;display:table-cell;" class="row"> Responsive div </div>
<div style="float: right; width: 120px; background-color: yellow;display:table-cell;"> Fixed div</div>
</body>
It's been a while I try to keep away from using tables for laying out elements, as I realized that they were not meant for that and that normal container elements like div,p along with CSS are enough to achieve any layout one can need. I've been successful so far but there's one situation that I don't seem to overcome on my own. What I basically need is something that a table with the following markup would do:
<table>
<tr>
<td>Michael</td>
<td rowspan="4"><img src="Photo.png"/></td>
<td>Svenson</td>
</tr>
<tr>
<td>Steve</td>
<td>Manson</td>
</tr>
<tr>
<td>Bob</td>
<td>Sandgal</td>
</tr>
<tr>
<td>Mirko</td>
<td>Lahovic</td>
</tr>
</table>
But I don't want to use table. This image will give you better idea of what I need:
I've tried using float left and giving the middle div the total height of the four adjacent divs, but this time the second line of divs begin from the bottom line of the middle div.
To demonstrate the changes , i have used border-color on the div, the code is pretty simple and clear.
In the example below the height has been fixed to 400px
<html>
<head>
<style type="text/css">
*, *:before, *:after {
box-sizing: border-box;
}
.row{
width : 100%;
border : 1px solid #ff0000;
padding: 5px;
float:left;
}
.cont{
height :400px;
border : 1px solid #00ff00;
width:33%;
padding:10px;
float:left;
}
.small-row{
height:25%;
border: 1px solid #0000ff;
width:100%;
padding:2px;
float:left;
}
</style>
</head>
<body>
<div class="row">
<div class="cont">
<div class="small-row"></div>
<div class="small-row"></div>
<div class="small-row"></div>
<div class="small-row"></div>
</div>
<div class="cont">
<div class="large-row"></div>
</div>
<div class="cont">
<div class="small-row"></div>
<div class="small-row"></div>
<div class="small-row"></div>
<div class="small-row"></div>
</div>
</div>
</body>
</html>
I'd t ry using display:inline-block on the outer divs like so:
<div style='display:inline-block;height:100px;'>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
</div>
<div style='display:inline-block;height:100px;'>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;height:100px;"></div>
</div>
<div style='display:inline-block;height:100px;'>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
</div>
No floats required :)