I'm tring to create two horizontal bars like the below example using only html and css. I'm using the following code:
<div style="height: 150px;">
<div style="width: 55px;float:left;">
<div>340.8</div>
<div style="background-color:#95111d; height: 75px;">
</div>
</div>
<div style="width:55px;float:left">
<div>340.8</div>
<div style="background-color:#9e9e9e; height: 115px;">
</div>
</div>
<br style="clear: both" />
</div>
The problem with this is both bars are sitting at the top of their containing div and not at the bottom so you get the 2nd below images effect.
I have some code that will be generating the height of these bars so I can't just add top padding/margin to push them into position. Is there any way to do this without resorting to javascript to calculate a margin and bottom align them?
Here is the CSS and markup that should do the work (no absolute positioning used)-
DEMO
HTML:
<div id="wraper">
<div id="c1">
<div id="h1">340.8</div>
<div id="b1">
</div>
</div>
<div id="c2">
<div id="h2">340.8</div>
<div id="b2">
</div>
</div>
<br style="clear: both" />
</div>
CSS:
#wraper {
height: 150px;
}
#c1 {
width: 55px;
vertical-align: bottom;
display: inline-block;
}
#b1 {
background-color: #95111d;
height: 75px;
}
#c2 {
width: 55px;
margin-left: -4px;
display: inline-block;
}
#b2 {
background-color: #9e9e9e;
height: 115px;
}
DEMO
You can use absolute positioning to fix an element to the bottom of its container.
HTML:
<div class="container">
<div class="bar">
<div>
<div>340.8</div>
<div style="background-color:#95111d; height: 75px;"> </div>
</div>
</div>
<div class="bar">
<div>
<div>340.8</div>
<div style="background-color:#9e9e9e; height: 115px;"> </div>
</div>
</div>
<br style="clear: both" />
</div>
CSS:
.container {
height: 150px;
}
.bar {
width: 55px;
float: left;
position: relative;
height: 100%;
}
.bar > div {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
Example: http://jsfiddle.net/grc4/pAnqe/1/
<html>
<body>
<div style="height: 150px;position:relative;" >
<div style="width: 55px;float:left;position:absolute;bottom:0;left:0px;">
<div style="background-color:#95111d; height: 75px;"> </div>
<div>340.8</div>
</div>
<div style="width:55px;float:left;position:absolute;bottom:0;left:55px;">
<div style="background-color:#9e9e9e; height: 115px;"> </div>
<div>340.8</div>
</div>
<br style="clear: both" />
</div>
</body>
</html>
jsFiddle
You can get the desired effect by using inline block elements and giving them a vertical-align value of bottom. here is some simple html and css.
html
<span class="bar" style="height:75px;background-color:#95111d;">
<div class="label">340.8</div>
</span>
<span class="bar" style="height:115px;background-color:#9e9e9e;">
<div class="label">350.1</div>
</span>
css
.bar {
display:inline-block;
width: 55px;
vertical-align:bottom;
}
.label {
position:relative;
top:-1em;
}
Related
I have tried float, display inline-block. Flex does work but I cant use flex as it will inline every single child div and I dont want that. I basically want few boxes in the left and one box on the right that auto size the height accordingly with the height size of the child divs from the left. I have tried floating boxChildRight to the right/left vice verse and its not working.
HTML
#sp {
position: absolute;
left: 400px;
top: 0;
}
#box {
width: 100%;
height: auto;
margin-top: 20px;
}
.boxChildRight {
right: 0;
width: 20%;
height: auto;
border: 1px solid;
position: relative;
float: right;
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
.prodInfo {
float: left;
margin-left: 10px;
}
.img {
margin-left: 0;
float: left;
}
<div id="box"> PARENT DIV
<div class="boxChildLeft"> CHILD
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildRight"> THIS CHILD DIV SHOULD BE ON RIGHT SIDE OF ALL OTHER DIVS
</div>
</div>
You can use position:absolute;
*{
box-sizing:border-box; /* Added */
}
#sp {
position: absolute;
left: 400px;
top: 0;
}
#box {
width: 100%;
height: auto;
margin-top: 20px;
position:relative; /* Added */
padding-right:20%; /* Added */
float:left; /* Added */
}
.boxChildRight {
width: 20%;
height: 100%; /* Updated */
border: 1px solid;
position:absolute; /* Added */
right:0; /* Added */
top:0; /* Added */
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
.prodInfo {
float: left;
margin-left: 10px;
}
.img {
margin-left: 0;
float: left;
}
<div id="box"> PARENT DIV
<div class="boxChildLeft"> CHILD
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildLeft">
<div class="img">
<img src="../shopImages/candles.jpg" width="100px" height="100px">
</div>
<div class="prodInfo">
<p1>Test</p1><br>
<span id="sp"><p1>Test</p1></span>
</div>
</div>
<div class="boxChildRight"> THIS CHILD DIV SHOULD BE ON RIGHT SIDE OF ALL OTHER DIVS
</div>
</div>
Updated on your comment
box-sizing
In CSS, by default, the width and height you assign to an element is
applied only to the element's content box. If the element has any
border or padding, this is then added to the width and height to
arrive at the size of the box that's rendered on the screen. This
means that when you set width and height you have to adjust the value
you give to allow for any border or padding that may be added. This is
especially tricky when implementing a responsive design.
MDN
Your problem is that although the divs are set to 80% and 20% - that does not include the border.
In order to include the border width within the overall width calculated for your elements, simply add:
* {
box-sizing: border-box;
}
for your CSS. This way, each element will take the border property in concideration when calculating the element's width.
I think using position is not a good solution we can do without using position absolute.
Agree with
* {
box-sizing: border-box;
}
This code is without using position absolute property:-
https://jsfiddle.net/oceh7f9q/
Description of Problem:
I'm attempting to arrange the kittens in a star-like pattern with 3 DIV "rows." I would like for the first top row's kitten to be centered on the page (easy enough); the second (or '#middle') row to have their cats left-aligned and right-aligned, respectively; and the third ('#bottom') row to have its cats aligned similar to the second row, but slightly indented on both sides. Again, like a star.
I know the float property essentially makes the element(s) absolutely positioned, which collapses the bottom two rows' height, so that's probably not the right answer. But I've also tried text-align and futzing with margins. My brain is fried. What am I doing wrong?
Fiddle:
http://jsfiddle.net/k97CG/1/
HTML Structure:
<div id="top">
<div id="container1" class="containers">
<div id="cat1">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="middle">
<div id="container2" class="containers">
<div id="cat2">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container3" class="containers">
<div id="cat3">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="bottom">
<div id="container4" class="containers">
<div id="cat4">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container5" class="containers">
<div id="cat5">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
CSS Structure:
.containers {
position: relative;
width: 125px;
height: 125px;
}
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
}
#container1 {
margin: 0 auto;
}
#container2 {
float: left;
}
#container3 {
float: right;
}
#container4 {
float: left;
}
#container5 {
float: right;
}
Is there a reason you can't just place them all in one div, then position them with CSS?
<div>
<img id="img01" src="img1">
<img id="img02" src="img1">
<img id="img03" src="img1">
<img id="img04" src="img1">
<img id="img05" src="img1">
</div>
then
div {
position:relative;
width:100%;
height:100%;
}
div img {
position:absolute;
}
#img01 {
top:x;
left:y;
} etc
As a rule, you shouldn't rely on HTML for visually styling content unless you have no other option. That's what CSS is for.
Is this the one you are looking for:
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
clear:both;
}
DEMO
So my logic of Div ID's and Classes must be WAY off.
Heres whats going on:
As you can see the blocks which say PS don't align center with the slider (Which is inside a container.
Here is my css:
/*Front Page Buttons */
#frontpage-Button-Cont {
height: 350px;
}
.button-cont {
width: 175px;
float: left;
margin-left: 10px;
margin-top: 10px;
height: 250px;
}
.thumbnail {
color: #fff;
font-size: 5em;
background: #1f4e9b;
width: 175px;
height: 135px;
text-align: center;
}
.pheader {
color: #DC143C;
min-width: 175px;
text-align: center;
}
.paragraph {
text-align: center;
}
#Align-content {
margin: 0 auto;
}
And here is the html:
<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
</div>
</div>
My theory is that I'm using classes incorrectly?
Thanks.
You can Add this to your CSS
#frontpage-Button-Cont {
width:100%;
}
#Align-content {
display:table;
}
With this your margin:o auto can work
View This Demo http://jsfiddle.net/VGPeW/
You need to make sure that the containing div (in this case frontpage-Button-Cont) is the same width as your slider above it. Then add the property text-align:center to the container. That should fix your issue.
I want to make a responsive design with different images, for example:
<div id="home" class="page">
<div id="home_1" class="section"><!-- Page 1 -->
<div id="home_1_1" class="full">
<img src="images/home/home_1/home_1.png" class="full-image"></img>
</div>
</div>
<div id="home_2" class="section"><!-- Page 2 -->
<div id="home_2_1" class="full">
<img src="images/home/home_2/home_2_block1.png" class="full-image"></img>
</div>
<div id="home_2_2" class="full">
<img src="images/home/home_2/home_2_block2.png" class="full-image"></img>
</div>
</div>
<div id="home_3" class="section"><!-- Page 3 -->
<div id="home_3_1" class="full">
<img src="images/home/home_3/home_3_block1.png" class="full-image"></img>
</div>
<div id="home_3_2" class="full">
<img src="images/home/home_3/home_3_block2.png" class="full-image"></img>
</div>
</div>
</div>
home_1, home_2 and home_3 are seperate image blocks. but home_2_1 home_2_2 should have the same top position and they also should be below home_1.
this is my css:
#home{
width: 100%;
text-wrap: none;
white-space: nowrap;
}
.section{
position: relative;
display: inline-block;
width: 100%;
}
.full{
position: absolute;
top:0;
left:0;
}
.full-image{
width: 100%;
display: block;
}
The problem is that I see only one image, the others don't floats beside each other.
I hope somebody can help me with this.
I'm not quite sure what you mean, but have you tried just using floats?
Check this fiddle: http://jsfiddle.net/9Ryby/
.section {
clear: both;
}
.full-image {
width: 50%;
float: left;
}
I have a page in ASP.NET as follows.
JSFIDDLE http://jsfiddle.net/nyrUp/
HTML
<div class="mainContainer">
<div>
<div class="topLeft">
<% =DateTime.Now.Ticks.ToString()%>
</div>
<div class="topRight">
foo
</div>
</div>
<div>
<div class="bottomLeft">
foo
</div>
<div class="bottomRight">
foo
</div>
</div>
<div class="underneath">
foo
</div>
</div>
CSS
.mainContainer {
}
.topLeft {
width: 50%;
float: left;
background-color: red;
}
.topRight {
width: 50%;
float: left;
background-color: orange;
}
.bottomLeft {
width: 50%;
float: left;
background-color: yellow;
}
.bottomRight {
width: 50%;
float: left;
background-color: green;
}
.underneath {
width: 100%;
background-color: blue;
}
This works fine, until you add content to any div, at which point the layout is broken
JSFIDDLE showing broken layout: http://jsfiddle.net/4gbP8/
How do I maintain this layout when content is added please?
i.e.
So I was able to contain them by placing a container on the blank div, called top. I think if I understand correctly you want each box to fill the page.
http://jsfiddle.net/4gbP8/2/
CSS ADD
.top {
display: inline-block;
width: 100%;
height: 100%;
}
HTML
<div class="top">
<div class="topLeft">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="topRight">
foo
</div>
</div>
I dont know if you are able to update the HTML but I have a solution If you can add in a new class.
I added a class called clear which help to push down the different levels and gives them a bit more structure.
JSFIDDLE
CSS
.clear{clear:both;}
HTML
<div class="mainContainer">
<div class="clear">
<div class="topLeft">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="topRight">
foo
</div>
</div>
<div class="clear">
<div class="bottomLeft">
foo
</div>
<div class="bottomRight">
foo
</div>
</div>
<div class="underneath clear">
foo
</div>
</div>
Let me know if it helps or I could tweek something to make it work better for yourself
You have 2 issues
In order to keep the column distribution you must clear the floats
In order to kept the backgrounds you must use negative margins "equ" exaggerated paddings
You will get this
(
See this fiddle with demo and full coding )
You must include wrapers for each pair of floating elements and some css for the negative margin trick
Markup should be as follows
<div class="mainContainer">
<div class="wrapper">
<div class="topLeft">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="topRight">
foo
</div>
</div>
<div class="wrapper">
<div class="bottomLeft">
foo
</div>
<div class="bottomRight">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</div>
<div class="underneath clear">
foo
</div>
</div>
Each floating div should include
{
...
padding-bottom:2000px;
margin-bottom:-2000px;
...
}
The ....left divs should include
{
...
clear:left;
...
}
And the wraper to be included for each pair of floating divs should be
.wrapper {
overflow:hidden;
}
The table/table-cell display properties can do what you're looking for:
http://jsfiddle.net/4gbP8/3/
.mainContainer {
}
.mainContainer > div {
display: table;
width: 100%;
}
.topLeft {
width: 50%;
display: table-cell;
background-color: red;
}
.topRight {
width: 50%;
display: table-cell;
background-color: orange;
}
.bottomLeft {
width: 50%;
display: table-cell;
background-color: yellow;
}
.bottomRight {
width: 50%;
display: table-cell;
background-color: green;
}
.underneath {
width: 100%;
background-color: blue;
}
If the content needs to reflow for narrow devices, hide the display properties behind a media query targeting wider devices.