i have parent div with 2 child divs inside. Both child div contain text, only 1 bigger than other. now consider responsive web design. I want 2nd child div at the bottom of parent div... i need to ensure both child div float left so that they can behave properly in responsive web
<div class="TitleHeader_Bar_L2">
<div class="WebPage_Title_L2">
<h4>Avaliable FeeZones</h4>
</div>
<div class="Title_Message_L2">
Select FeeZones to Add in Given Scheme
</div>
CSS
.TitleHeader_Bar_L2{
overflow:auto;
width:100%;
background-color:red;
}
.WebPage_Title_L2{
float:left;
color:#F8F8FF;
font-size:1.7em;
padding:.5%;
margin-left:.7%;
}
.Title_Message_L2{
float:left;
color:#F8F8FF;
font-size:1em;
font-style:italic;
margin-left:.7%;
}
You can try this:
Fiddle Here
.TitleHeader_Bar_L2{
overflow:auto;
width:100%;
background-color:red;
position:relative;
}
.WebPage_Title_L2{
float:left;
color:#F8F8FF;
font-size:1.7em;
padding:.5%;
margin-left:.7%;
}
.Title_Message_L2{
color:#F8F8FF;
font-size:1em;
font-style:italic;
position:absolute;
bottom:0
}
Good Luck...:)
Related
There is a content class, in which there 2 have class classes in it, One is left float and other is right float as you seen in image.
I want a footer at the end or bottom of my page, i.e after the 2 classes div ends.
CSS:
.footer
{
background-color:black;
width:100%;
height:25px;
margin-right:auto;
margin-left:auto;
color:white;
bottom:0px;
position:absolute;
}
But is it not working. If you see the image,it is not at the bottom... even though bottom:0px? Is there any problem?
Add this before footer div
<div style="clear:both;"></div>
and remove position: absolute from footer css
I'm trying to achieve some indent for content inside div. I want to have all elements inside to have 100% width, but first ones have to be positioned further from the left side. This demonstration shows what I exactly need:
I tried to mess around with ::before pseudoelement for parent div, different positioning and floating but no luck. Is there a way to achieve this in CSS or maybe jQuery?
Use the :nth-child pseudo class to select the items you want and then just give them a margin.
div{
border:1px solid #000;
padding:5px 10px;
}
p{
background:#000;
font-family:arial;
color:#fff;
margin:5px 0;
padding:5px;
}
p:nth-child(-n+2){
margin:5px 0 5px 50px;
}
<div>
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
</div>
By the way, floating items and giving them a 100% width is somewhat redundant so I have omitted that from my code.
You don't need to add width:100% to your elements. If they are block elements it will take automatically 100% of the container width. Then just use marginto whatever element you need:
HTML:
<div class="container">
<div class="content margin"></div>
<div class="content margin"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
body {margin:0; padding:0;}
.container {
width:400px;
padding:20px;
background-color:#ddd;
}
.content {
height:60px;
background-color:green;
margin-bottom:10px;
position:relative;
}
.margin {
margin-left:150px;
}
FIDDLE
I am having problem understanding the height of element in div. I have a header div which has certain divs inside it.The div inside occupy certain height. Isn't the header supposed to cover the area occupied by the elements defined inside it when the height is not mentioned. As per my understanding the header is supposed to wrap all the div inside it.
Please correct me if I am wrong.
This is my body
<div style=" float:left; background-color:pink; width:20%; height:40px; ">
THis is left
</div>
<div style=" float:left; background-color:gray; width:70%; height:40px; " >
<div id="htop">
This is top
</div>
<div id="hbutt" >
this is buttom
</div>
</div>
And here goes style
#cont{ background-color:yellow; width:900px; height:300px; margin:auto; padding:40px; }
#header{ background-color:red; width:100%; padding:5px; }
#cont2{ background-color:blue; width:10%; height:auto; padding:5px; clear:both; }
#htop{ background-color:maroon; }
#hbutt{ background-color:purple; }
For output and possible change need https://jsfiddle.net/sum1/vmq3y2rv/
When you have floating DIVs inside any other DIV, then height does not calculated automatically for outer DIV, to make it you should add display:inline-block or display:table to outer DIV depending on your layout.
#header {
background-color:red;
width:100%;
padding:5px;
display:inline-block;
}
Check this https://jsfiddle.net/vmq3y2rv/1/
Yes this is true but when all elements are floated inside of the header it collapses.
.clearfix{
clear:both;
}
and then insert a div right before your header ends with a class of clearfix.
Jsfiddle is here
https://jsfiddle.net/kriscoulson/vmq3y2rv/2/
You can either use float:left or display:inline-block/table , It will be based on your requirements and layout.
I create pic what i must do this. I have div container page. And i now on top div creating div to login and register page . And i want div what have login and register form have posttion near top div. How to do what? I tryed float: left and right posstion absolute fixed relative and nothing help.
My div container css
#srodek
{
margin:0 auto;
width: 970px;
}
and div login
#logowanie
{
border-style:dotted;
border-width:2px;
display:none;
float:left;
padding:8px;
}
Since you are already using javascript to make the login box visible, the position of this login box
can be dynamically given as:
$("#logo").on("click", function () {
alert("test");
$("#logowanie").css({
"display": "block",
"left":$("#srodek").offset().left +
970
+ "px"
});
});
Here is the working copy: http://jsbin.com/efeler/1
not quite sure what you are asking for but I think you are trying to position some div tags. So when you have your container, let's say 600 x 600 px, if you want to place 3 boxes (div tags) in the top row at 200 px a piece, then your code should use the display:inline-block; in the css form to lock in the div tags where they should be.
so:
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
.container{
width:600px;
height:600px;
.box1
width:200px;
height:200px;
display:inline-block;
.box2
width:200px;
height:200px;
display:inline-block;
.box3
width:200px;
height:200px;
display:inline-block;
I want to create a div which contains an image and text on it. Something similar to http://wearyoubelong.com/ How do I go about doing this? I am using Zerb Foundation Framework. As of now I have tried using position : absolute on the text, but that seems to break at a lot of places. Can you please advice me on how to go about this?
Let say you have a sample HTML like this
HTML
<div id="container">
<div id="content">
<h1>Here goes some content</h1>
<p>Description about the product.
Some more desription about the product.</p>
</div>
</div>
CSS
#container
{
background-image:url('http://image.made-in-china.com/2f0j00cZjaqNvWlEks/Men-T-Shirt.jpg');
background-repeat:no-repeat;
height:400px;
width:400px;
}
#content
{
position:absolute;
height:auto;
width:auto;
top:150px;
left:100px;
}
#content h1
{
color:Yellow;
font-weight:bold;
font-size:22px;
}
#content p
{
color:Red;
}
Just gave the main div #container a background-image , positioned div #content to absolute and then using top and left property float it according to your needs.
Live Demo
Hope this helps.
Edited to set #container div's height and width to auto
Updated Demo