I have a fixed div on the left of my screen and I want to put there the categories, and near it I want to put 2 more other divs, the first one to wider that the second, and both of them to be floated left, but the problem is that the 2 divs intersect with the fixed one, and I don't want that, how can I solve this ?
I've made a fiddle here:
https://jsfiddle.net/rn11jxh2/
HTML:
<div id="meniu">
<div id="cat" >
<div class="catico">
<img src="img/Categories.png"/>
</div>
<div class="cattext">
Categories:
</div>
</div>
<ul>
<li>sdncsldncsd </li>
<li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li>
</ul>
</div>
<div id="invitapemail">
</div>
#invitapemail {
float:left;
position:relative;
height:200px;
width:620px;
right:30px;
background-color:white;
border:2px solid #797979;
border-radius:1em;
padding:10px;
margin-top:10px;
font-family:Verdana, Geneva, sans-serif;
font-size:1.2em;
color:#797979;
z-index:2;
}
#meniu{
position:fixed;
height:420px;
width:140px;
line-height:30px;
font-size:1.15em;
margin-left:0px;
padding-right:75px;
padding-left:30px;
text-decoration:none;}
This is expected behavior. position:fixed removes the element from the document flow. That means it will ignore other elements as if they aren't even there, this it can cause overlaps. The float:left is shifting your content over to the left as if the fixed menu isn't there.
You can set a margin-left to offset the elements by the width+padding of the menu, in this case it looks like 200px: https://jsfiddle.net/rn11jxh2/1/
You can read more about positioning and floats here: https://css-tricks.com/all-about-floats/
Related
When I use a div block with float:left and another with relative position, the second block behaves unexpectedly - the text goes beyond the box and its background color. What is happening here?
https://jsbin.com/merehowoxa/1/edit?html,output
#first-section{
color:black;
background-color:pink;
width:100px;
float:left;
}
#second-section{
color:purple;
background-color:yellow;
width:100px;
height:100px;
position:relative;
left:500px;
top:200px;
}
Whenever you use Float: left, It needs to be cleared.
Add this between both your div's
<div id="first-section">
<p>Text1</p>
<p>Text2</p>
</div>
<div style="clear:both">
<div id="second-section">
I had three divs inside a main div with id main_div and has css already as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
</div>
I just want to insert three divs in the main div as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
So i want the div format to display the text like
breadcrumb_text dropdownlist Pagination
I tried with different css by using position attribute and various css options but could n't able to align them in a horizontal line with one div as left , one div as center and other div to right.
So can anyone let me know me know the css to place them in an horizontal line ?
This maybe help you Fiddle
#main_div > div {
width: 33%;
float: left;
}
I have modified your code little bit with spacing equally for each div and removed Position in the Main div.
Sometimes position will overlap with other div (position) based on z-index value. so if you really need use position unless not required.
#main_div{
height:10px; line-height:50px; margin-top:1px;
box-sizing:border-box;
}
#main_div > div{
width:31.1%;
float:left;
box-sizing:border-box;
border:1px solid grey;
margin-right: 10px;
display:inline-block;
}
#main_div > div:first-child{
margin-left:10px;}
<div id="main_div">
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
I think this is what you are asking for
JSFiddle
CSS
body
{
margin:0%;
}
.main_div
{
display:block;
margin:0% 5%;
width:90%;/*Just random, modify as per your requirement*/
height:300px; /*Just random, modify as per your requirement*/
background:#eee;
position:relatve;
}
.left-div, .center-div, .right-div
{
display:inline-block;
height:100%;
position:relative;
float:left;
width:33%;
border:1px solid #000;
text-align:center;
padding-top:5px;
}
HTML
<div class="main_div">
<div class="left-div">
Div One should be Left(breadcrumb_text)
</div>
<div class="center-div">
Div Two should be Center(dropdownlist)
</div>
<div class="right-div">
Div Three should be Right(Pagination)
</div>
</div>
I realize this is probably another newbie question but I have tried different things and can't make this work. I am basically building a team page where I want to have a picture on the left side and some text on the right side for each team member. Under the name of the person comes the title, and below that (between title and a paragraph) is a bunch of badge links for email, LinkedIn, and Twitter. For the purpose of having the badges align perfectly below the title, I have used a table. I want to repeat that set up for each team member and have them stack on top of each other.
What I have right now for one person (which displays correctly) in html:
<div class="left">
<img src="url"/>
</div>
<div class="right">
<H3>Name</H3>
<H4>Title</H4>
<table>
<tr>
<td><a href="mailto:email"><img src="url"/></td>
<td><img src="url"/></td>
<td><img src="url"/></td>
</tr>
</table>
<p>Experience</p>
<p>Experience</p>
<p>Experience</p>
</div>
And here is the CSS:
.left img{
position:relative;
float:left;
height:15%;
width:15%;
top:50px;
}
.right{
position: relative;
float:left;
margin-top:10px;
}
.right h3{
color:#39c388;
font-weight:bold;
font-family:Arial,sans-serif;
font-size:28px;
position:relative;
top:30px;
left:20px;
}
.right h4{
color:#818286;
font-family:Arial,sans-serif;
font-size:24px;
position:relative;
top:20px;
left:20px;
}
.right td img{
width:20px;
height:20px;
position:relative;
top:20px;
left:20px;
}
.right td{
width:30px;
}
.right p{
color:#818286;
font-family:Arial,sans-serif;
font-size:20px;
position:relative;
top:40px;
left:20px;
}
So far so good. Now, I want to replicate this code and have these section stack up on top of each other. How would you do that? I have tried having a div around this whole html code and then give that div a class, and used position, z-index, etc but without any success.
If you mean 'stack on top of each other' as in layered over each other, then you need to use:
{position: absolute; top: 0; left: 0} (having top and left position to the position you require)
on the container <div>s for each section.
However, if you mean 'stack on top of each other' as in listed down the page, then it should work with a container <div> as is. You may need to give the container <div> and the left div an {overflow: hidden} (and {height: 1%} for IE 6 - 8) to count for the floating child elements within them.
I am trying to add two images (ul,li) at the end of a DIV. I use position ABSOLUTE, RELATIVE and left:0, bottom:0, and it does it, but it doesnt remain on the div.
The images appear in the "MainDiv", and not in "container".
The css:
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
width:100%;
height:600px;
}
#container{
width:980px;
height:600px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
}
The Html:
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1">Example1</li>
<li id="image2">Example2</li>
</ul>
</div>
</div>
The absolutely positioned element is positioned with respect to the corresponding edges of it's parent... from the look of it your container doesn't have any height set...
When you add a height to container it does move your <ul> to the bottom of the div. In fact, it is always at the bottom of the div, but because the height of the div is 0 it doesn't look like it is at the bottom of it.
http://jsfiddle.net/s5aE3/
#container{
width:980px;
margin:0 auto;
position:relative;
height: 800px;
}
The list is correctly positioned at the bottom of the container div, but there is nothing that gives the container div any height. As the height of the container div becomes zero, the list is placed with the bottom where the container div is.
To put the list inside the container div, you need to give the container div a height. Either by specifying a height style, or putting something inside it that isn't absolutely positioned or floating.
Edit:
With your updated code that has a height for the container div, the list is placed at the bottom.
Try setting the vertical align to bottom.
<style>
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
}
#container{
width:980px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
vertical-align:bottom;
}
</style>
<body>
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1>Example1</li>
<li id="image2>Example2</li>
</ul>
</div>
</div>
I need to show one big div with 3 divs inside it. The layout has to be fluid, i.e. the height of the big div must adapt to the contents of the 3 divs inside it. Moreover, I want the 3 divs have the same height, and I managed to do that with display:table property for the container div and display:table-cell property for the 3 inner divs. Nevertheless, there is a big problem: as soon as I put a div with a margin-top: inside the first of the three divs, it shifts downwards the content of the other two divs.
I really cannot understand why, any help would be much appreciated.
Here is the html and the css code:
<div id="body">
<div id="left-box">
<div id="left-container">
LEFT LEFT LEFT LEFT LEFT LEFT
</div>
</div>
<div id="central-box">
<div id="central-container">
CENTRAL CENTRAL CENTRAL CENTRAL CENTRAL
</div>
</div>
<div id="right-box">
<div id="right-container">
RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
</div>
</div>
</div>
CSS:
#body {
width:80.9%;
margin:0 auto 0 auto;
height:auto;
/*background-color:#0F3;*/
display:table;
}
#left-box {
height:100%;
width:60%;
background-color:red;
display:table-cell;
border-right:1px solid #000;
}
#left-container {
background-color:#0CF;
width:72%;
margin-top:82px;
margin-left:2%;
}
#central-box {
background-color:#00F;
display:table-cell;
border-right:1px solid #000;
width:20%
}
#central-container {
margin-top:0px;
float:left;
background-color:#FF0;
}
#right-box {
background-color:#0C0;
display:table-cell;
border-right:1px solid #000;
width:19%;
}
#right-container {
margin-top:0px;
background-color:#FF0;
}
Try using vertical-align on the divs, for example something like this:
div {vertical-align:top;}
it is a similar phenomenon as with inline-block elements we discussed here
here I put your code + vertical-align on jsfiddle