I have this markup:
<body>
<div class="prevBtn"> <a> < </a> </div>
<div id="player"> some code </div>
<div class="nextBtn"> <a> > </a> </div>
</body>
I'm trying to get this layout:
Note: The previos and the next button are close to the #player
And i'm trying like this:
.nextBtn{
float:left;
width:15%;
margin-top:180px;
}
.nextBtn a{
float:right;
}
.player{
float:left;
width:70%;
margin-top:100px;
}
.prevBtn{
float:right;
width:15%;
margin-top:180px;
}
.rightBtn a{
float:left;
}
the problem is that it doesn't stay like the layout if the resolution is too big or too small,
How can I achieve this for any resolution?
surround it with a div with 770px + the left and right buttons width (change their widths from percent to a fixed width).
This will guarantee all are together.
Also use a overflow: hidden or a div with clear:both at the end, this will make sure everything is in place.
Related
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.
Is there any way to get the following box model to work.
I have 2 div's in a container that should be displayed side by side.
The problem I have is that I must push the left div by certain number
Also trying to stay away from negative margin on right div because it is
braking the responsive layout.
http://jsfiddle.net/Ubg6H/1/
<div id="header">
<div id="left"></div>
<div id="right">
<div class="box">
<div class="box_in">Sample</div>
</div>
<div class="box">
<div class="box_in">Sample</div>
</div>
<div class="box">
<div class="box_in">Sample</div>
</div>
</div>
</div>
#header {
width:800px;
margin:0 auto;
overflow:hidden;
background:#ccc;
padding:15px;
}
#left, #right {
display:table;
background:green;
height:200px;
}
#left {
width:20%;
float:left;
margin-left:10px;
}
#right {
width:80%;
float:right;
margin-left:10px;
}
.box {
width:33.33%;
float:left;
}
.box_in {
background:red;
margin:10px;
display:block;
height:100px;
}
Any help is appreciated.
Here is the solution
http://jsfiddle.net/Ubg6H/6/
use
display:table;
and
display:table-cell;
Thnx to
http://mihaifrentiu.com/how-to-fill-the-available-space-when-using-floated-divs
All you need to do is reduce the width of your right div and it will slide up to be side by side. I think you have a few other things you should probably rework to work well responsively. But anyways the problem is there isn't space for both divs to fit side by side currently. So you can fix it by reducing margin or reducing width.
Edit:
I'm definitely not into magic numbers, but as CodeMonkeyG said, there is a difference between magic numbers and mathematics. You could however use the css calc to calculate the difference. So for example: you would have the percentage be the fluid width and the 80px be what ever your fix margin and padding would equal.
width: calc(100% - 80px);
You can also choose to do percentage based margins and padding if you so desire. Calc is probably going to give you better control though. Unless you plan on continuing with some media queries.
change to this
#right {
width:77%;
float:right;
margin-left:10px;}
The #right{width:80%;} is too much with the margin so it moved #right below the left div
http://jsfiddle.net/Ubg6H/3/
After the header I have one div which contains two others, which are next to each other. I want to create a border between them. I've tried to use the right border of the left div or the left border of the right div, but they don't work right.
The right div can have much content, so I have to do overflow: hidden for it, so I can scroll the page. But if I have only little content, the div will not fill the entire page vertically, so the left border will be to small. Here -> http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html you can see what I'm talking about.
When the right div increases vertically, I want the border to go to the bottom, to follow it's size.
HTML:
<div id="wrapper">
<div id="leftsidebar">
<form id="logoutForm" action="index.html">
<h1 id="login_title">Logout</h1>
<fieldset id="actions">
<input id="logout" type="submit" value="Log out" />
</fieldset>
</form>
</div>
<div id="main">
<span id="location">Home</span>
News
</div>
</div>
CSS:
div#wrapper{
position:absolute;
top:25%;
width:100%;
}
div#leftsidebar{
/*position:absolute;
top:25%;*/
width:19.87%;
height:100%;
min-width:200px;
float:left;
}
div#main{
/*position:absolute;
top:25%;
left:20%;*/
/*width:79.81%;
float: left;*/
font-size:1.2em;
border-left-color:white;
border-left-style:solid;
border-left-width:3px;
overflow:hidden;
padding-bottom:2%;
}
How can I obtain what I want?
Give the wrapper and the main div the right height and you'll get the result.
div#wrapper{
position:absolute; /*Stayed this whay cause you needed it*/
top:25%;
height: 75%; /**Make the wrapper contain all the needed space*/
width:100%;
}
div#main{
height:96%;
/**Value actually needs be a bit less then 100 due to padding*/
.... /**You're code here*/
}
You can see the result in action on the following jsFiddle.
http://jsfiddle.net/pY6nF/
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