<div align="center">
<div class="se" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="uk" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="de" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div></div>
<div> i dont want this menu div to jump up and down when hover</div>
css file:
.se {margin-top:-30px;}
.se:hover {margin-top:-15px;}
.uk {margin-top:-60px; margin-left:-150px;}
.uk:hover {margin-top:-45px;}
.de{margin-top:-60px; margin-left:150px;}
.de:hover {margin-top:-45px;}
I just want the flags to slide down when hover. As you see in my fiddle, it's acting strange depending on with flag i hover first.
This could probably be solved in an easier way? http://jsfiddle.net/XScjm/1/
I think you are in the wrong way to acomplish what you want, first you can't offset the image with margin because that affects all arround the element. And the way you are trying to position each <div> with margin is unrecommended.
Try to do it this way:
.center {
text-align:center;
}
.se, .uk, .de {
position:relative;
display:inline-block;
cursor:pointer;
}
.se:hover, .uk:hover, .de:hover {
top:15px;
}
Check this Demo
Have a look at this one :-
DEMO
<div align="center" class="one"></div>
.one{ height: 60px; }
try this:
.se, .uk, .de {
float: left;
margin-right: 5px;
margin-top: -40px;
}
.se:hover img, .uk:hover img, .de:hover img {
margin-top: 20px;
}
This will work. JSFiddle.
HTML
<div id="center" align="center">
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
</div>
<div> i dont want this menu div to jump up and down when hover</div>
CSS
.flag {margin-top:-30px; position:relative; display:inline-block;}
.flag:hover { top:15px; }
#center { height: 50px; }
Related
I'm trying to change the height of background-color in class.
#myclass{
background-color: #FFF;
padding: 25px;
border: 1px solid #e1e1e1;
height:auto;
}
<div id="myclass">
<div class="col-md-4">image</div>
<div class="col-md-4">text</div>
<div class="col-md-4">button</div>
</div>
In CSS height:420px working but i don't want something like this
Sounds like you're having an issue with floating elements. As the .col-md-* elements are floated, your #myclass element has no height (thus no background will display). Bootstrap's .col-md-* elements are supposed to be wrapped in an element with a class of "row", and I believe this will solve your problems:
<div id="myclass" class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
If that isn't an option, you'll need to add an element to clear the floats on those .col-md-4 elements:
<div id="myclass" class="row">
<div class="col-md-4">...</div>
...
<br style="clear: both">
</div>
Solution 1) If it is a solid background-color - you can add the background as a image
#myclass {
background-image:url('pathtoimage/background-image.png');
background-size: 100% 450px;
background-position: left top;
}
Solution 2)
Add a fake-background image/color by adding a div inside #myclass.
<div id="myclass">
<div class="fake-bg"></div>
<div class="col-md-4">image</div>
<div class="col-md-4">text</div>
<div class="col-md-4">button</div>
</div>
Add this to your css:
#myclass {
position:relative;
}
.fake-bg {
position:absolute;
left:0;
top:0;
width:100%;
height:450px;
z-index:-1;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
please use this css and just put .clearfix with .ror class.
it would work defiantly
I want to create a table in my wordpress website. i want to place the table in the right side. The problem is, if i want to write contents outsides like to left side of the table then how will i do it. Can you please give me an example?
I am beginner in css so plz forgive me for the writing style.
I want to make a style for a website like (the pic i have attached). Can you Please help me that how can I write freely in the left side of the table?
Use position: absolute:
#navbar {
position: absolute; left: 0;
width: 20%;
}
#content {
position: absolute; right: 0; /*Presuming this is the table*/
}
You should take a look at the display property of css, this is mainly used for aligning content on webpages.
http://www.w3schools.com/cssref/pr_class_display.asp
You mean a table inside the content div?
#content {
margin-left:20%;
}
#navbar {
float: left;
width: 20%;
}
.table-wrapper {
display:inline-block;
}
<div id="layout">
<div id="header">Top Header</div>
<div id="navbar">Navigation</div>
<div id="content">
<div class="table-wrapper">
<table><tr><td>table 1</td></tr></table>
</div>
<div class="table-wrapper">
<table><tr><td>table 2</td></tr></table>
</div>
</div>
<div id="footer">Bottom Footer</div>
</div>
http://jsfiddle.net/KhH42/1/
Something like this?
#wrapper {
border:solid 2px #000;
margin:20px;
}
#wrapper div[class*="col-"]{
float:left;
}
.col-1 { width:30%; background:#eee; }
.col-2 { width:30%; background:#e2e2e2; }
.col-3 { width:40%; background:#ccc; }
#wrapper:after { content:""; clear:both; display:block; }
<div id="wrapper">
<div class="col-1">
<p>col 1 content</p>
</div>
<div class="col-2">
<p>col 2 content</p>
</div>
<div class="col-3">
<table>
<tr>
<td>
my table
</td>
</tr>
</table>
</div>
</div>
http://jsfiddle.net/3LUqg/
How would i make my middle div take the remaining space left in width, but still staying in its place beside the 2 other divs?
Also if i remove either of the 2 divs on the sides, the main div should just take what space there is left?
Code:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
http://jsfiddle.net/U3Hr5/2/
My suggestion is using a table since you want all of them to be on the same row but with their own heights.
Html:
<div class="row-fluid">
<table style="width: 100%">
<tr>
<td class="sidebar">1</td>
<td class="content-box">2</td>
<td class="sidebar">3</td>
</tr>
</table>
Css:
.sidebar {
width:225px;
background-color:blue;
}
.content-box {
background-color:red;
}
Here is the fiddle edit:
http://jsfiddle.net/mDpEX/
//Flipbed
If you don't want to use table for layout, you can make use of css3 display table, table-cell properties,
#container {
display: table;
width: 100%;
}
#left, #middle, #right {
display: table-cell;
height: 100px;
}
#left, #right {
width: 150px;
background: green;
}
#middle {
background: gray;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
jsfiddle
More on css display properties
I assume you want something like this.
The HTML:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
The CSS:
.sidebar {
float:left;
width:225px;
background-color:blue;
}
.content-box {
clear:left;
background-color:red;
width:225px;
}
Hope this helps.
Actually i didn't get your question correctly. If you are looking to align your div on to the remaining space after your first div ie after sidebar div simply put width of content-box as 50%(or the size you want).
It depends upon how much you want the layout to respond to resizing without using JavaScript and what browsers you're trying to cater for. If your layout is essentially static and you just want to respond to width changes then you can use something like this.
http://jsfiddle.net/U3Hr5/4/
HTML
<div class="row-fluid">
<div class="span12">
<div class="left sidebar">1</div>
<div class="content-box">2</div>
<div class="right sidebar">3</div>
</div>
</div>
CSS
.span12 {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
width: 225px;
background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
margin-left: 225px;
margin-right: 225px;
background-color:red;
}
You can try something like this http://jsfiddle.net/kKGVr/
Basically, if you don't wrap the content in a containing div it will expand to fill the available space - you can test this by removing the divs called #left or #right. This will also allow you to add a footer because no absolute positioning is used.
It will fall down, however, if the central column becomes longer than the side columns... solution? Not sure, perhaps use javascript to adjust the height of the side columns so they are always at least as long as the central column.
HTML:
<div id="wrapper">
<div id="right">...</div>
<div id="left">...</div>
content here
</div>
and CSS:
#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}
Sorry guys for the really simple question but I have tried to float one div left and one right with predefined widths along these lines
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Although this 'mostly' works it seems to mess up the other elements on the page below it.
So what is the correct why to split a HTML page vertically into two parts using CSS without effecting other elements on the page?
you can use..
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
<div style="clear:both"></div>
now element below this will not be affected.
Just add overflow:auto; to parent div
<div style="width: 100%;overflow:auto;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Working Demo
I guess your elements on the page messes up because you don't clear out your floats, check this out
Demo
HTML
<div class="wrap">
<div class="floatleft"></div>
<div class="floatright"></div>
<div style="clear: both;"></div>
</div>
CSS
.wrap {
width: 100%;
}
.floatleft {
float:left;
width: 80%;
background-color: #ff0000;
height: 400px;
}
.floatright {
float: right;
background-color: #00ff00;
height: 400px;
width: 20%;
}
There can also be a solution by having both float to left.
Try this out:
Working Demo
P.S. This is just an improvement of Ankit's Answer
Check out this fiddle:
http://jsfiddle.net/G6N5T/1574/
CSS/HTML code:
.wrap {
width: 100%;
overflow:auto;
}
.fleft {
float:left;
width: 33%;
background:lightblue;
height: 400px;
}
.fcenter{
float:left;
width: 33%;
background:lightgreen;
height:400px;
margin-left:0.25%;
}
.fright {
float: right;
background:pink;
height: 400px;
width: 33.5%;
}
<div class="wrap">
<!--Updated on 10/8/2016; fixed center alignment percentage-->
<div class="fleft">Left</div>
<div class="fcenter">Center</div>
<div class="fright">Right</div>
</div>
This uses the CSS float property for left, right, and center alignments of divs on a page.
Alternatively, you can also use a special function known as the linear-gradient() function to split browser screen into two equal halves.
Check out the following code snippet:
body
{
background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}
Here, linear-gradient() function accepts three arguments
90deg for vertical division of screen.( Similarly, you can use 180deg for horizontal division of screen)
lightblue color is used to represent the left half of the screen.
skyblue color has been used to represent the right half of the split screen.
Here, 50% has been used for equal division of the browser screen. You can use any other value if you don't want an equal division of the screen.
Hope this helps. :)
Happy Coding!
Here is the flex-box approach:
CSS
.parent {
display:flex;
height:100vh;
}
.child{
flex-grow:1;
}
.left{
background:#ddd;
}
.center{
background:#666;
}
.right{
background:#999;
}
HTML
<div class="parent">
<div class="child left">Left</div>
<div class="child center">Center</div>
<div class="child right">Right</div>
</div>
You can try the same in js fiddle.
It should be very simple, but I am, so it's not ...
The first thing on the page, right after <body>, I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page.
Can you do that without knowing the width og the image?
Yes, put image in one div, and text in another, define "float: right" property for the div with the image, and "float: left" for div with the text in CSS
<div class="div1"><img src=...></div>
<div class="div2">text</div>
<style type="text/css">
.div1 {
float: right;
}
.div2 {
float: left;
}
</style>
<div id="banner">
<div style="float: left; width: 50%;">
left - just put your text here
</div>
<div style="float: right; width: 50%;">
right - just put your image here
</div>
</div>
You may also want to use a clearfix (google it) technique to ensure the banner div always has height no matter how big the image is.
Here's a fiddle : http://jsfiddle.net/KaHjd/1/
I've assumed that you want the image right aligned as well.
#header {
overflow:auto;
}
#branding {
float: left;
padding: 10px;
background: #00AA00;
}
#logo {
float:right;
padding: 10px;
background: #aa0000;
overflow:auto;
}
#logo img {
float:right;
}
<div id='header'>
<div id='branding'>
some text
</div>
<div id='logo'>
<img src='http://placekitten.com/200/100'>
</div>
</div>
Of course we can. But your image must be small enough in order for your text not to overflow the banner.
HTML
<div class="banner">
<span>Text goes here</span>
<img src="" alt="" />
</div>
CSS
.banner { overflow: hidden; width: 100%; }
.banner span { float: left; }
.banner img { float: right; }