I have an issue with elements. When I type any text in any place inside search_groups_wrapper, the right colum fall to the bottom. If there is no text, it is displayed as should be. What is the problem?
Here is jsfiddle - http://jsfiddle.net/csYU8/ with problem. Remove 'Here is some text' and element will move top.
I can't find what causes this but I found a solution:
Just add the styles below to your #search_wrapper
top:0;
position:absolute;
CSS
#search_wrapper
{
height:50px;
width:100%;
top:0;
position:absolute;
}
DEMO
Add align: left to your search_groups_wrapper and existing_groups_wrapper.
FIDDLE DEMO
instead of using display:inline-block you should use float:left property. and to clear the float you can use clear:left on parent div.
or you want to still use the display: inline-block.
#search_groups_wrapper
{
display:inline-block;
height:100%;
margin:0;
padding:0;
border:0;
width:70%;
position:relative;
top:0;
vertical-align:top; /*I've just added this line*/
}
Here is the another working Demo . http://jsfiddle.net/kheema/csYU8/7/
#search_groups_wrapper {
border: 0 none;
display: inline-block; /*Better Remove this line and add float left*/
float: left;
height: 100%;
margin: 0;
position: relative;
top: 0;
width: 70%;
}
#existing_groups_wrapper {
border: 0 none;
display: inline-block; /*Better Remove this line and add float left*/
float: left;
height: 100%;
margin: 0;
width: 30%;
}
Here is a Demo. http://jsfiddle.net/csYU8/
Related
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
I have the following jsfiddle I am trying to get the pictures of the cats inside the black box to align perfectly in the center and middle so that there is a black border around the image if it does not fit perfectly inside the container. I have tried a few different methods using line-height:100px with a vertical-align:middle also text-align:middle but none seem to be working.
In these scenarios, when the width/height of the containing element is known, I use position absolute and margin auto. Give the containing element relative position and make the image absolute. margin: auto will force the image to display in the absolute center.
.photoContainer img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
see the fiddle http://jsfiddle.net/Pv8uN/1/
Or if you do not want to position absolute, try this :
.content{
display:inline-block;
width:750px;
margin-top:10px;
margin-bottom:10px;
height:auto;
background-color:orange;
}
.photoContainer {
width:200px;
height:200px;
background-color:#000000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content img {
max-width:200px;
max-height:200px;
vertical-align: middle;
}
see the fiddle : http://jsfiddle.net/aAMJS/
Without absolute positioning.
Check out this Working Fiddle
ADD text-align: center; to .photoContainer
.photoContainer:before
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -5px;
}
and ADD vertical-align: middle; to .photoContainer img
I am trying to create a simple html file with 2 column like structure. I managed it but there is no space between each element as you can see in the JSFiddled demo. I tried margin and padding but failed. How can I put some space between input elements for example?
JSFiddle
And here is my css:
.left
{
position:relative;
left:10px;
}
.right
{
position:fixed;
left:300px;
}
You could also use p elements to surround your label-field matches instead of using br line breaks, and would still be valid HTML.
For example:
<p>
<label for="foo">Foo:</label>
<textarea id="foo"></textarea>
</p>
Here's a fiddle.
Try this, but why are you using relative label and fix position for inputs?
.left {
display: inline-block;
left: 10px;
margin-bottom: 10px;
position: relative;
}
.left
{
position:relative;
left:10px;
width:300px;
float:left;
display:block;
}
.right
{
position:relative;
left:0px;
display:block;
}
This works fine with your jsfiddle. Tested it there. Add further margins if you need. The display:block does the trick
Try this using inline-block for this type of thing:
.left {
display: inline-block;
width: 300px;
margin-left: 0.6em;
}
label, input, select {
margin: 0.5em 0;
}
Could anybody write the CSS fragment to do this?
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
I've alredy tried float:left/float:right on the two nested elements but nothing happens.
Set the elements to block, set a width and float them.
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
float: left and float: right will work perfectly when you set a (relative or absolute) width for your .container div
Demo
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note: If you set the .container to width: 100% you will get ugly scroll bars due to the margin. Just use the margin in the .left and .right classes. See here.
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; } or improve your code into something like:
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}
I am working on a simpl web page where I use a menu bar in a div tag . When I am not fixing the div tag it can be aligned in center using:
.top .overlay{
background-image:none;
text-align:center;
}
But when I use the position: fixed; then the alignment of menu doesn't work
.top .overlay{
background-image:none;
position:fixed;
text-align:center;
}
It's working if I use a fixed margin, but the problem is that the behavior would change depending on the screen resolution.
please help
Add this to your CSS:
.top .overlay {
width: 100%;
text-align: center;
}
And don't forget to remove the margin-left: 18%; part.
Try putting margin:0 auto; in .top .overlay {}
.top .overlay{
background-image:none;
position:fixed;
text-align:center;
margin:0 auto;
}
Solution for you: set width to 100%
.top .overlay{
...
position:fixed;
width: 100%;
...
}
I tried this CSS on your site with firebug and it worked:
.top .overlay {
background-image: none;
margin: 0 auto;
width: 830px;
}
The auto value for the margin CSS property will work only if a width is set.
I also removed the position property.
#container {
position :fixed;
margin: auto;
top:0%;
width: *AS_REQUIRED* px;
}
#container p {
text-align: center;
}
As shown above i have created two divisions:
For Positioning menu and its design
For text inside the menu
NOTE: text will be aligned center when you write text inside the <p> </p> tag