I am having hard time to adjust floating div with dynamic heights (with CSS only) if you see the bottom gap i want them to stick together having dynamic height
please check the code here any help would be highly appreciated
.c {
display: inline-block;
width: 100%;
}
.D {
float: left;
}
<div class="c">
<div class="D" style="height:100px; background:blue; width:25%;">
</div>
<div class="D" style="height:200px; background:green; width:25%;">
</div>
<div class="D" style="height:100px; background:pink; width:25%;">
</div>
<div class="D" style="height:120px; background:red;width:25%;">
</div>
<div class="D" style="height:200px; background:red; width:25%;">
</div>
<div class="D" style="height:150px; background:blue; width:25%;">
</div>
<div class="D" style="height:100px; background:green; width:25%;">
</div>
<div class="D" style="height:100px; background:pink;width:25%;">
</div>
</div>
Could this be what you're trying to achieve?
If you end up using this approach, make sure to set the height of .c the sum of the two (or more) tallest, and stacked, .D elements.
https://jsfiddle.net/axelboberg/5pdpf6zh/
Also, try to use as little inline css as possible. It will get messy when your project grows and violates the MVC concept.
Related
I have a table with height 100% and three rows, the first and last ones have a fixed height, and the one in the middle has no specific height so it stretches to the necessary height.
The problem is that if you fill that row with too many items, the table will be too big and it will exceeds the 100%.
<div id="wrapper">
<div id="first" class="row">
<div>
first
</div>
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="first" class="row">
<div>
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
#first
{
height:50px;
margin-bottom:5px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second > div{
height:100%;
border: 1px solid red;
overflow-y: auto;
}
It's difficult to explain, but this fiddle demonstrates it: http://jsfiddle.net/3EjX8/127/
Resize the table with your mouse in chrome and it will behave nice (scrollbar appears inside the table).
But resize it in firefox and it will have this unexpected behavior.
Maybe I'm wrong and I'm taking good part of a chrome's bug.
I'm just wondering if there is a possibility to make this behave in firefox as it does on chrome.
Thanks.
I made it work on both firefox, chrome.
Don't use display: table for this, not necessary
You had the id "first" two times.
You don't need divs inside divs
Use 'calc' it's a life saver.
http://jsfiddle.net/foreyez/p3rcyofk/
<div id="wrapper">
<div id="first" class="row">
first
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="last" class="row">
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper
{
width:300px;
height:100%;
}
#first,#last
{
height:50px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second {
height:calc(100% - 100px);
border: 1px solid red;
overflow-y: auto;
}
I have two elements on my page which I wish to align side by side, what would be the best way of going about this, and can somebody explain the best way to go about coding it when you want to align elements together.
In this example I want the video to take up most of the room say 3/4 and the chart to be in the remaining 1/4. (Bootstrap is loaded on this page)
Any suggestions?
This is what it currently looks like:
http://i1057.photobucket.com/albums/t390/Alexwileyy/element_zps066ecdd2.png
(I have outlined the video in a color so I can see the perimeters)
This is my HTML code for the two elements:
<!--Video Section-->
<div class="video">
<div class="container">
<div class="video-element">
<iframe width="460" height="215" src="//www.youtube.com/embed/PdABTJhRTLY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!--End Of Video Section-->
<!--Start of chart-->
<div class="container">
<div class="chart">
<div class="chart-cont">
<h1 id="chart-header">Charts</h1>
</div>
<div class="chart-cont">
<h1>1</h1>
<img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
View Review</td>
</div>
<div class="chart-cont">
<h1>2</h1>
<img src="http://savegameonline.com/wp-content/uploads/2013/05/CoD-Ghosts-banner.png">
View Review</td>
</div>
<div class="chart-cont">
<h1>3</h1>
<img src="http://bit.ly/1tSu4iq">
View Review</td>
</div>
<div class="chart-cont">
<h1>4</h1>
<img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
View Review</td>
</div>
<div class="chart-cont">
<h4>View More..</h4>
</div>
</div>
</div>
<!--End of chart-->
This is my CSS code for my two elements:
.chart {
background-color:white;
width:400px;
margin-bottom:10px;
margin-top:-35px;
}
.chart-cont * {
display:inline;
}
.chart-cont {
padding:10px;
box-shadow: 0 2px 5px rgba(26,26,26,0.75);
text-align:center;
}
.chart-cont img {
width:180;
height:60px;
}
.chart-cont h1 {
vertical-align:middle;
}
Any answers greatly appreciated.
First if you want to work with 3/4 of the screen, start using a percentage as width.
First create a content Div, then a LeftContent and a RightContent div.
Like this:
<div class="Content">
<div class="LeftContent">
</div>
<div class="RightContent">
</div>
</div>
CSS:
.Content{
width:100%;
margin:10px;
padding:10px;
}
.LeftContent{
width:60%;
margin:10px;
float:left;
}
.RightContent{
width:30%;
margin:10px;
float:right;
}
Now you can place the video left, and the other images right, adjust how you want to with padding, margin and width percentage, test with making your window smaller (how it looks like on smaller screens).
Notice to make use of float left and float right.
Here is JSFiddle link: http://fiddle.jshell.net/7pp7q/1/
I need to swap two elements by using css. My html is here:
<div class="container">
<div class="Div2">
<img src="Div2.jpg">
</div>
<div class="Div1">
<img src="Div1.jpg">
</div>
</div>
and my css is here:
.container{width:50%; margin:auto;}
.div2{float:left;width:100%;}
.div1{float:left;width:100%;}
is there any way how to put Div1 on the position of Div2 only with css without changing html?
Float .div2 to the right, and .div1 to the left:
.div2{ float:right; }
.div1{ float:left; }
You'll also have to remove the width: 100%; if you're attempting to stack them side by side.
Also, classes are case-senstive. In your example code, your div classes are .Div1 and .Div2, make sure to use all lowercase classes to match the definitions:
<div class="container">
<div class="div2">
<img src="Div2.jpg">
</div>
<div class="div1">
<img src="Div1.jpg">
</div>
</div>
Example: http://jsfiddle.net/dph8t/
I've had page layout made via an Html table in my home page.
the lay out was fine , though i was reading that tables are not the way to go (SEO and maybe not only that)
so i need to use divs, the layout is as follows
(i am in RTL Lang /style /direction)
My Question is
Could anyone Try and simplify how to or give an example for a lay out like that
and in more detailed explained :
i think "my life" was so simple, when i had to understand the structure of a table
so, for illustration purpose take this markup:
<table>
<tr> <td>1</td> <td>2</td> </tr>
<tr> <td>3</td> <td>4</td> </tr>
</table>
here you don't need to think much to analyze that this will be 2 by 2 table
but when it comes to divs i get no results laying them as i plan to
i would like to know how do i make that simple as it was with a table for me .
2 now that i am trying to achieve that layout via divs (no table involved )
and to make it work so that layout will be Cross Browser, meaning will look same
at least for the 3 main browsers IE8&9 / FF / Chrome (only my preference)
thanks in advance
I tried hard to make template like what you want.I hope you will like it.See my layout
by division tag.I am attaching a screen shot as well that is created on the base of
my div logic.I think it will be clear for you.
<div id="main" >
<div style="background-color:Blue; text-align:center; ">
Main banner
</div>
<div style="background-color:Green; text-align:center; " >
Top menu
</div>
<div style="background-color:Gray; text-align:center; width:300px; float:right; height:200px; " >
Right side menu
</div>
<div style="background-color:Red; text-align:center; height:200px;" >
<div style="background-color:Fuchsia; text-align:center; width:300px; float:right; height:100px; ">
contend2
</div>
<div style="background-color:Lime; text-align:center;height:100px; ">
contend1
</div>
<div style="background-color:Aqua; text-align:center; width:300px; float:right; height:100px; ">
contend4
</div>
<div style="background-color:Orange; text-align:center;height:100px; ">
contend3
</div>
</div>
<div style="background-color:Silver; text-align:center; " >
Footer
</div>
</div>
**In case if you want external css then use**
<div id="main" >
<div id="mainbanner">
Main banner
</div>
<div id="topmenu" >
Top menu
</div>
<div id="rsm" >
Right side menu
</div>
<div id="maincontend" >
<div id="c2" >
contend2
</div>
<div id="c1">
contend1
</div>
<div id="c4">
contend4
</div>
<div id="c3">
contend3
</div>
</div>
<div id="footer">
Footer
</div>
</div>
**CSS................**
#Main
{
}
#mainbanner
{
background-color:Blue;
text-align:center;
}
#topmenu
{
background-color:Green;
text-align:center;
}
#rsm
{
background-color:Gray;
text-align:center;
width:300px;
float:right;
height:200px;
}
#maincontend
{
background-color:Red;
text-align:center;
height:200px;
}
#c2
{
background-color:Fuchsia;
text-align:center;
width:300px;
float:right;
height:100px;
}
#c1
{
background-color:Lime;
text-align:center;
height:100px;
}
#c4
{
background-color:Aqua;
text-align:center;
width:300px;
float:right;
height:100px;
}
#c3
{
background-color:Orange;
text-align:center;
height:100px;
}
#footer
{
background-color:Silver;
text-align:center;
}
You can't ask for complete layouts, but I wrote two tutorials that will definitely help you acquire the skill required to make them: How to Position in CSS and Create a Fixed ('Sticky') Footer with CSS.
Check this
<div id="wrapper">
<div id="header">
<p>This is the Header</p>
</div>
<div id="navigation">
<p>This is the Menu</p>
</div>
<div id="leftcolumn">
<div class="row">
<div>1st block</div>
<div>2nd block</div>
</div>
<div class="row">
<div>3rd block</div>
<div>4th block</div>
</div>
</div>
<div id="rightcolumn">
sfsf
</div>
<div id="footer">
<p>This is the Footer</p>
</div>
</div>
DEMO
HTML-Cleaner has a nice feature to replace HTML tables with DIVs: http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/
Make sure you include the css code supplied.
I have this html:
<div id='calendarControlPane'>
<div id='calendarControl'>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
</div>
</div>
I'm using "display:inline-block" on container divs because I want those divs to fit the size of their contents.
The problem I have is that they are drawn next to each other and need to be drawn below each other.
Well, depending upon your actual final application, using a float can work (see fiddle), though older versions of IE can choke on it:
HTML
<div id="calendarControlPane">
<div id="calendarControl">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
</div>
CSS
#calendarControl > div {
float: left;
clear: left;
border: 1px solid black;
}
#calendarControl > div > div {
width: 14px;
height: 15px;
}
Oldschool fix:
<div id='calendarControlPane'">
<div id='calendarControl'">
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div>
</div>
</div>
Simply add a
<br />
after each div containing the inline-block class.
You're not really asking a question here, and the two bottom lines of your post are a bit hard to understand, but are you sure you don't want display: block instead?
edit: As drublic said, this is the default display value for divs, so you shouldn't need that style at all.