i have a problem in aligning the div's vertically,what should be problem?
here is my html code
<div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
</div>
css
.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
clear:both;
position:relative;
margin-left:5px;
margin-top:5px;
}
#profile2
{
position:relative;
margin-left:310px;
margin-top:5px;
}
#profile3
{
position:relative;
margin-left:620px;
margin-top:5px;
}
i want the three div's to be aligned vertically together inside the parent, here is the demo
I'm not sure why you need so many redundant codes to achieve like what you describe, just do:
.recentProfiles
{
width:300px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
Demo: http://jsfiddle.net/VvqXF/
That's because of your margins. If you take clear:both off profile1 and then add float: left onto all profiles, then take off those margins.
Demo: http://jsfiddle.net/WC5gT/
Try using float:left on class profiles and then no margin on profile1, profile2, profile3
Working example: http://jsfiddle.net/rK38V/
Have all the boxes float left (float: left) and remove all margin properties, like this: http://jsfiddle.net/2ABmU/
You get the idea of float wrong. Here's the new code: http://cdpn.io/AvJqI
HTML
<div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
<div class="floatClear"></div>
</div>
CSS
.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
position:relative;
margin-left:5px;
margin-top:5px;
}
#profile2
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}
#profile3
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}
.floatClear {
clear: both;
}
Related
I'm trying to centre an image using css and html, however I seem to be missing something. I'm wondering if someone can help me. The image I'm trying to centre falls into #home_top_logos a:
/* Uncomment the following to hide the site title */
/*
#site_title {
display: none;
}
*/
}
#home_top_logos {
width:950px;
padding-bottom:20px;
padding-top:77px;
}
#home_top_logos a {
display:block;
margin:auto;
margin-bottom:54px;
padding: 25px 0px 20px 0;
}
#home_top_logos p {
width:811px;
padding-bottom: 50px;
margin:auto;
height:75px;
background:url(../images/old_style_bg1.png) no-repeat;
}
#home_top_logos p a {
width:366px;
display:block;
height:50px;
line-height:50px;
color:#616161;
text-align:center;
}
Here is the HTML as well:
> <div class="wrapper section" id="home_top" data-key="H"> <div
> id="home"> <div id="home_top_botm_bg"> <div id="home_top_inn">
> <div id="home_top_logos">
> <div id="site_title"><img src="images/retro_img1.png" alt="#" /></div>
> <p> </p>
> <div class="clr"></div>
> </div>
you must use dispaly:block and margin:0px auto
Demo
CSS:
#home_top_logos img {
display:block;
margin:0 auto;
}
another way:
set width for img and use left or right for that
Demo
CSS:
#home_top_logos img {
position:absolute;
width:40%;
left:30%;
}
add this:
#home_top_logos a {
text-align:center;
}
#home_top_logos a img {
display:inline-block;
}
example
You need to add width:100%; and text-align:center; to make this work.
#home_top_logos a {
width:100%;
text-align:center;
display:block;
margin:auto auto 54px auto;
padding: 25px 0px 20px 0;
}
Add the display:block; and margin: auto; to your image too:
http://jsfiddle.net/F5av6/5/
#home_top_logos img {
display:block;
margin:auto;
}
I need to make a layout in CSS, somewhat like this.
Green & red are 2 squares on left and right corners respectively. How do I make Yellow region occupy all the space in between, and also align the text in ('Login', in the screenshot) as centered.
Also I tried couple of things with Twitter-Bootstrap too. col-md-1, pull-left etc. didn't quite achieve what I intended. Any help is appreciated.
Here is my working code (without any Bootstrap)
<head>
<style>
#myContainer{
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
}
#leftLogo{
width:40px;
height:40px;
background-color: green;
float:left;
}
#rightLogo{
width:40px;
height:40px;
background-color: red;
float:right;
}
#labelText{
height:40px;
float:left;
width:100%-80px;
background-color: #f3ff11;
}
</style>
</head>
<body>
<div id="myContainer">
<span id="leftLogo"></span>
<center>
<span id="labelText"><H2>Login</H2>></span>
</center>
<span id="rightLogo"></span>
</div>
You can use display:table and display:table-cell to achieve this.
First fix your markup:
<div id="myContainer">
<span id="leftLogo"></span>
<span id="labelText"><h2>Login</h2></span>
<span id="rightLogo"></span>
</div>
Then your CSS:
div, span, h2 {
margin:0;
padding:0;
}
#myContainer {
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
display:table;
}
#leftLogo, #rightLogo, #labelText {
display:table-cell;
height:40px;
}
#leftLogo, #rightLogo {
width:40px;
}
#leftLogo {
background-color: green;
}
#rightLogo {
background-color: red;
}
#labelText {
text-align:center;
background-color: #f3ff11;
}
Demo: http://jsfiddle.net/TjGC3/
You can use position:absolute; to position your colored squares inside a wrapper with position:relative and width:100%;
FIDDLE
HTML:
<div id="myContainer">
<div id="labelText">
<span id="leftLogo"></span>
<H2>Login</H2>
<span id="rightLogo"></span>
</div>
</div>
CSS:
#myContainer{
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
}
#leftLogo{
width:40px;
height:40px;
background-color: green;
position:absolute;
top:0;
left:0;
}
#rightLogo{
width:40px;
height:40px;
background-color: red;
position:absolute;
top:0;
right:0;
}
#labelText{
height:40px;
width:100%;
background-color: #f3ff11;
position:relative;
text-align:center;
}
h2{
line-height:40px;
margin:0;
padding:0;
}
I want three div's next to eachother (I placed them in a .wrapper div so I could float them to the left). The three div's should be centered on the page. So I thought, if I center the .wrapper with margin-left/right: auto, all the three divs would center up. This didnt work.
Also, when I resize the browser the divs move. I don't want that to happen.
I've googled endlessy and put lots of solutions in the script, nothing worked.
Also, it shows differently per browser (firefox, safari and Chrome).
Here's my HTML:
<div id="container">
<div class="wrapper">
<div id="lost"><img src="images/lost.png"></div>
<div id="compass"><img src="images/compass.png"></div>
<div id="sailor"><img src="images/sailor.png"></div>
</div>
<div id="sea">
<img src="images/seaAnimated.png" class="sea" id="animatedSea">
</div>
</div>
And my CSS:
body,html
{
margin:0px;
padding:0px;
}
#container
{
position:absolute;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.wrapper
{
left:auto;
right:auto;
margin-left:auto;
margin-top:8%;
margin-right:auto;
padding-left:auto;
padding-right:auto;
width:100%;
height:75%;
}
#lost
{
float:left;
width:auto;
clear:both;
margin-left:auto;
margin-right:auto;
}
#compass
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sailor
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sea
{
position:absolute;
bottom:0px;
z-index:2;
background-image:url(images/sea.png);
background-repeat:repeat-x;
background-position:bottom;
height:25%;
width:100%;
}
#animatedSea
{
position:absolute;
bottom:10px;
width:auto;
height:25%;
z-index:-1;
}
try this
css
.wrapper{
text-align:center;
margin-top:8%;
width:100%;
height:75%;
}
#lost{
display:inline-block;
width:50px;
height:50px;
background-color:#0C0;
}
#compass{
display:inline-block;
width:50px;
height:50px;
background-color:#06F;
}
#sailor{
display:inline-block;
width:50px;
height:50px;
background-color:#96F;
}
html
<div class="wrapper">
<div id="lost">123</div>
<div id="compass">456</div>
<div id="sailor">789</div>
</div>
jsFiddle Code
You could use a fixed width on your wrapper to get it to center. You do have to specify a width (and not leave it empty) because divs are block-level, meaning that they fill the entire width by default.
http://jsfiddle.net/isherwood/CBMaX/2
.wrapper {
width: 240px;
margin-left:auto;
margin-right:auto;
}
#wrapper
{
text-align: center;
}
#compass
{
width:33.3%;
}
#sailor
{
width:33.3%;
}
#lost
{
width:33.3%;
}
Try this css. Include this css into your css.
I am unable to position #center3 directly below #center1. I have tried floating right and it didn't work, I have also tried using the relative positioning but it not also working either.
I have been searching for help on this topic on the Internet for a wile now without any luck. I have also spent some time to see if I can figure it out by my self but it turn out to be too difficult for me.
HTML
<section>
<article></article>
<aside></aside>
<aside id="center1"></aside>
<aside id="center2"></aside>
<aside id="center3"></aside>
</section>
CSS
section {
margin:0px auto;
width:960px;
}
article {
width:960px;t turned out to be
height:100px;
border:1px solid #333;
}
aside {
width:250px;
height:1000px;
border:1px solid #333;
margin-top:5px;
margin-right:5px;
float:left;
}
#center1 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
}
#center2 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
}
#center3 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
}
http://jsfiddle.net/paZB6/1/
(edit with new fiddle: I added to .right-column a 1px blue border so you can easily visually see what it is doing)
You need to add a clear to #center3 first of all in order to bypass the floats above it.
Further than that however, to keep it from also clearing your aside, you need to wrap the right side elements in a containing element so as to separate those boxes from the aside.
What I have done is to create two columns, your aside, plus whatever remains to the right of it, then your #center1,2,3 boxes are contained inside the box to the right of aside. Note that you can add width and whatever else to right-column as needed, I have only provided the base functionality.
Note that I also changed your HTML <section> that was wrapping everything. Instead of targeting it in css as section (not best practice for what you are doing), I gave it a class called wrapper and applied your styles to it via the class name.
HTML:
<section class="wrapper">
<article>
<p>Some text</p>
</article>
<aside>
</aside>
<section class="right-container">
<aside id="center1">
</aside>
<aside id="center2">
</aside>
<aside id="center3">
</aside>
</section><!-- END RIGHT CONTAINER -->
</section>
CSS:
.wrapper {
margin:0px auto;
width:960px;
}
article {
width:960px;t turned out to be
height:100px;
border:1px solid #333;
}
aside {
width:250px;
height:1000px;
border:1px solid #333;
margin-top:5px;
margin-right:5px;
float:left;
}
.right-container {
float: left;
}
#center1 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
}
#center2 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
}
#center3 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
clear: both;
}
Try to add clear:left; to #center3
In this I want the div #intro to float below the div #navtop.
At the moment it hovers below on the right side.
<style>
#wrapper {
width:850px;
height:auto;
margin:auto;
font-family:Arial, Helvetica, sans-serif;
}
#header {
height:100px;
width:850px;
margin:0;
margin-top:25px;
background:url(img/header.png) no-repeat #000 ;
border:2px #000 solid;
}
#navtop {
width:auto;
height:45px;
float:left;
background:#000;
padding-right:8px;
}
#navtop a {
width:500px;
margin:0px;
margin-left:8px;
padding-left:4px;
padding-right:4px;
color:#FFF;
padding-bottom:0px;
text-decoration:none;
}
#logo {
height:40px;
width:40px;
margin-left:4px;
}
#navtop a:link {
background:#666;
}
#navtop a:hover {
color:#999;
}
#intro {
width:auto;
height:auto;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
}
#about {
width:500px;;
height:auto;
float:right;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
margin:0px;
padding:0px;
}
body {
background:#999;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navtop"><img id="logo" src="img/logo.jpg" alt="logo" width="40" height="40" />
Home
About
tour
photos
contact
</div>
<div id="intro">
<img src="img/djpic.jpg" width="300" height="450" alt="pic" /></div>
<div id="about"> <h2>DJ TECHIE LUNCHBOX</h2>
<p>DJ Techie Lunchboxis the current dj who knows what an audience thinks , her upside down skiiny fettish style sjing will
leave any with a head without for for chips and shandy . chocolate malnurishment bring a chip bang mismosh to her long term goals
.</p>
.
</div>
</div>
</body>
It's because you have float: left; on #intro.
Try this:
#intro {
width:auto;
height:auto;
clear:left;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
}
#about {
width:500px;;
height:auto;
float:left;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;
}
edited to make the #about div float next to #intro div.
If you still want that floated to the left of whatever the other box (I assume you do), try adding a clear: left to the #intro CSS. This will cause the box to break down to below whatever element is causing it to move to the right and start a new line.
#intro {
width:auto;
height:auto;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
clear:left;
}
don't use float:left on #navtop. It wants to line #navtop and #intro divs beside eachother
I am not 100% sure I understand what you are trying to accomplish but i will take a stab at it
you could target your #navtop with a rule
#navtop{clear: right;}
or simply remove the float: left from the #intro
either one of these will move the #intro under the nav
however if you want the intro to be next to something you will have to use clear:right on navtop