Hi I want to achieve the following:
The following code works but I'm not sure if position: absolute for left upper "Name" is the wise way to do it or should I use float ?
Here is the html
<div class="bodyframe">
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
And the css
![.bodyframe {
}
.upperbodyframe{
}
#leftupperbodyframe{
text-align:left;
border: 1px solid ;
position: absolute;
}
#rightupperbodyframe{
text-align: right;
}]
i would use floats here. there's really no reason for the position:absolute here as well.
.upperbodyframe {overflow:hidden} /* or div will collapse with only floated elements inside */
#leftupperbodyframe {float:left; border: 1px solid ;}
#rightupperbodyframe {float:right;}
You can do this with two method.
First Method
.upperbodyframe{
width:100%;
position:absolute;
}
#leftupperbodyframe{
position: absolute;
left:0px;
}
#rightupperbodyframe{
position: absolute;
right:0px;
}
.clear{
clear:both;
}
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
Second Method
.upperbodyframe{
width:100%;
}
#leftupperbodyframe{
float:left;
}
#rightupperbodyframe{
float:right;
}
.clear{
clear:both;
}
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
Thanks,Arun Krishnan
Related
I'm trying to place submenu right below its's choosing option like this but when I set left and right attributes on 0
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:0;
right:0;
}
it has whole site's width. When I set them on auto it looks like this.
How do I place my submenu exactly below this div or, what would look even cooler, on it's right?
Code (whole JSFiddle in comments):
HTML:
<div id="sidebar">
<div class="sidebar_option">Strona główna</div>
<div class="sidebar_option">Galeria</div>
<div class="sidebar_option">Reżyserzy
<div class="sidebar_wrapper">
<div class="submenu" style="margin-top:10px">Quentin Tarantino</div>
<div class="submenu">Bracia Coen</div>
<div class="submenu">Wes Anderson</div>
</div>
</div>
<div class="sidebar_option">Ulubione filmy</div>
<div class="sidebar_option">Seriale</div>
<div class="sidebar_option">Kontakt</div>
</div>
CSS:
.submenu
{
text-align:center;
border-bottom:dotted 2px black;
padding-top:10px;
padding-bottom:10px;
display:none;
font-size:13px;
}
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:auto;
right:auto;
}
.sidebar_option:hover div
{
display:block;
}
.sidebar_option:hover
{
background-color:lightgray;
cursor:pointer;
}
.sidebar_option
{
text-align:center;
margin:10px;
padding:10px;
border-bottom:dotted 2px black;
}
I think the key is you need to set the position of the sidebar_option to relative so that the submenu_wrapper will be position in relation to the sidebar instead of the window. Then some value for left and right for the submenu. It can be anything, but if you want it centered they need to be the same.
.sidebar_option {
position: relative;
}
.sidebar_wrapper {
position: absolute;
background-color:lightgray;
left: 5%;
right: 5%;
z-index: 2;
}
Here's the updated jfiddle: https://jsfiddle.net/8d3p50hy/13/
I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!
Any help would be appreciated, thank you! :)
Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
It's already working for the snippet you showed. I just put a background color on the div.form so you could see.
In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.
Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
You can also place 2 divs side by side using display:inline-block on the two divs.
(If you want it responsive, define the width of the child with % and not pixels.)
.child1 {
background:#082a46;
}
.wrapper {
border: 1px solid #ccc;
}
.blurb {
color: #fff;
background-color: blue;
width:200px;
height:400px;
display:inline-block;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
display:inline-block;
}
<div class="child1">
<div class="wrapper">
<div class="blurb"></div>
<div class="form"></div>
</div>
</div>
I have this sample
link
CODE HTML:
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
CODE CSS:
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
I want to move div on the right (.right) to be in line with div website (banner) without changing HTML code (just CSS).
I tried to add margin-top:-6em look different on other resolutions.
Can you help me to solve this problem?
Thanks in advance!
If you can only change the CSS, you have to use margin-top:-100px instead of margin-top:-6em if you want to align it. https://jsfiddle.net/ck3pux8x/1/
But the best solution would be changing the HTML to move the .right div outside the .inner an place it next to the .banner and make .banner float right. https://jsfiddle.net/ck3pux8x/2/
HI now try to this define your body position relative and your class .right position absolute and left or top according to your requirement .
as like this
body{
position:relative;
}
.right {
background: aqua;
position: absolute;
left: 400px;
top: 0;
}
Demo
.right{
position:absolute;
left:400px;
top:0;
}
body{position : relative;}
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
You can use relative re-positioning in this case:
.right{
background:aqua;
position: relative;
top: -100px;
}
https://jsfiddle.net/ck3pux8x/4/
I'm having trouble in aligning divs in my project. I'm expecting something like this:
but what i've done so far is like this one:
All divs have class "inline"
CSS:
div.inline{
float: left;
}
Thanks in advance.
why not something like this?
just a little adjustment to deepus code: though the width of the parent and children must be set to your standards
<html>
<head>
</head>
<style>
.inline
{
width:50px;
height:50px;
text-align:center;
border:1px solid black;
float:left;
margin:2px;
}
.main
{
width:120px;
}
</style>
</head>
<body >
<div class="main">
<div class="inline">div 1</div>
<div class="inline">div 2</div>
<div class="inline">div 3</div>
<div class="inline">div 4</div>
</div>
</body>
</html>
Simple:
div {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 4px;
}
div:nth-child(odd) {
clear: left;
}
See this fiddle: http://jsfiddle.net/QkruA/
go to old school way...clear:both
demo
css
div.inline{
float: left;
width:200px;
height:200px;
border:1px solid #000;
}
.clr{
clear:both;
}
html
<div class="inline"></div>
<div class="inline"></div>
<div class="clr"></div> <!-- taa daa...i love old schools methods :) -->
<div class="inline"></div>
<div class="inline"></div>
why don't you just use display:inline-block on each div
To make it easy for you for in the future add a class "left" and "right"
In this way you only have to make 2 very little css codes and you can use it every time you want something to set left or right (so you dont need to type this again every time you want to use it)
CSS code
.left
{
float:left;
}
.right
{
float:right;
}
.box
{
width:50px;
height:50px;
text-align:center;
border:1px solid black;
margin:2px;
}
.main
{
width:120px;
}
HTML code
<body >
<div class="main">
<div class="left box">div 1</div>
<div class="right box">div 2</div>
<div class="left box">div 3</div>
<div class="right box">div 4</div>
</div>
</body>
As you can see from the code i'm using clear:both to allow me to place #three under #one #two but this seems to be stopping me from adding margin-top to #three is there a fix for this?
<div id="one">
</div>
<div id="two">
</div>
<div id="three" class="clearfix">
</div>
#one {
float:left;
}
#two {
float:right;
}
.clearfix {
clear:both;
}
#three {
margin-top: 20px;
}
As a workaround you may use
padding-top : 20px
or you may also technically use
position: relative;
top: 20px;
applied on #three div. Or even
padding-bottom: 20px;
applied on #two div. And even
#two:after {
content : "";
clear : both;
display : block;
height : 20px; // or margin-bottom: 20px;
}
Just choose the option that fits best for your layout
Apply float:left; to #three to fix your issue
Edit: Or follow Fabrizio and add padding if you don't want to float anything, but no need to use relative positioning.
Wrap #one and #two in a container with overflow:hidden;, and you won't even need the clearfix.
Demo
<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>
#container {
overflow:hidden;
}
#one {
float:left;
}
#two {
float:right;
}
#three {
margin-top: 20px;
}
Hi now change some code in you html and do this
<div style='overflow:hidden'>
<div id="one">Left</div>
<div id="two">Right</div>
</div>
<div id="three" class="clearfix">// your data </div>
Live Demo
This JSFiddle should help you
<div class="row">
<div id="one">
a
</div>
<div id="two">
b
</div>
</div>
<div id="three">
c
</div>
CSS
#one {
float:left;
}
#two {
float:right;
}
clearfix {
clear:both;
}
.row{ overflow: hidden; border: 1px solid red; }
#three {
margin-top: 40px; border: 1px solid green;
}
You need to apply the clear: both; to the #three div.
Then it will be like this: http://jsfiddle.net/uJBK2/
EDIT
Now I see you're just missing a point before clearfix. Nevermind.