I'm trying to float a rounded rectangle (created using CSS) both left and another box right inside a centered container. When I do so, the left box isn't not aligned with the left, and the right box is flowing over the container. I've tried a million things, but I'm too new to CSS to solve this...
Here is my code:
#container {
overflow:hidden;
width: 100%;
max-width:960px;
background-color: #FFFFFF;
margin-left:auto;
margin-right:auto;
}
#branding {
width:100%;
height:100px;
background-color:black;
z-align:1000;
}
#logo {
background-image:url("images/google-logo-small.png");
height:69px;
width:200px;
margin:15px 0 0 10px;
float:left;
z-align:1001;
}
#toparea {
margin:20px 0px 0 0;
float:right;
color:white;
z-align:1001;
}
#toparea ul li {
list-style:none;
display:inline-block;
padding:0 30px 20px 0;
}
#topcontent {
width:100%;
height: 300px;
background-color:inherit;
margin:10px 0px 0px 10px;
z-align:1000;
}
#blockone {
-moz-border-radius: 0px 10px 5px 10px;
border-radius: 15px;
width:45%;
height:200px;
background-color:gray;
float:left;
border-width:1px;
border-color:black;
margin: 10px 0 0 0;
}
#blockone p {
font-size:20px;
color: white;
padding:20px 0 0 20px;
}
#blocktwo {
-moz-border-radius: 5px 0px 5px 10px;
border-radius: 15px;
width:45%;
height:200px;
float:right;
background-color:gray;
border-width:1px;
border-color:black;
margin:10px 0 0 0;
}
#blocktwo p {
font-size:20px;
color: white;
padding:20px 0 0 20px;
}
#footer {
clear:both;
-moz-border-radius: 5px 10px 5px 10px;
border-radius: 15px;
width:100%;
height:200px;
background-color:gray;
border-width:1px;
border-color:black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<div id="branding">
<div id="logo"></div>
<div id="toparea">
<ul>
<li>Content</li>
<li>Content2</li>
</ul>
</div>
</div>
<div id="topcontent">
<div id="blockone">
<table>
<tr><td>field</td><td input="textbox" /></tr>
<tr>
</table>
</div>
<div id="blocktwo">
<p>this is more text</p></div>
</div>
<div id="footer">Some more copy</div>
</div>
</div>
</body>
</html>
set the margin 0 to id topcontent
#topcontent {
width:100%;
height: 300px;
background-color:inherit;
margin:0;
z-align:1000;
}
see demo here
Related
I need to place the promo div in the right side of the alert div, just like this:
Please, can some CSS expert help me with this code: https://jsfiddle.net/08rnpxbt/4/
body {
width:640px;
float:left;
margin:0 6px 0 6px;
padding:18px;
font-family:Arial, Helvetica, sans-serif;
}
p {
padding:0;
margin:8px 0 0 0;
}
div.alert {
padding:8px 12px 8px 12px;
margin:20px auto 20px auto;
text-align:justify;
border:2px solid #389CF2;
border-radius:8px;
background-color:#F5F5F5;
background-image:url(http://i61.tinypic.com/1oxi50.png);
background-repeat:no-repeat;
background-position:8px 11px;
}
div.alert span {
display:block;
//float:left;
padding-bottom:2px;
margin-left:40px;
font-size:15px;
line-height:1.3em;
color:#5C5C5C;
}
div#promo {
display:block;
width:80px;
height:32px;
padding:4px 2px 2px 2px;
text-align:center;
line-height:15px;
font-size:14px;
color:#FF0000;
border:2px dotted #585858;
border-radius:16px;
background-color: #FFFFD5;
}
<body>
<div class="alert" style="width:530px; margin:0 auto 10px auto;">
<span>
<b>Windows 7 Home Premium - 02 License(s)</b><br>
Price: U$ 225.00 up to 10X or R$ 210.00 in cash
</span>
<div id="promo">15,00% de desconto !</div>
</div>
</body>
Just add this CSS rule to your #promo element:
#promo{
float: right;
}
and change this in your CSS:
div.alert span{
display: inline-block;
}
If you don' set inline-block the #promo will break in new line like you had it before.
Try it here
You can use flexbox attribute for this
just add display:flex and justify-content:space-between
div.alert {
display:flex;
justify-content:space-between;
padding:8px 12px 8px 12px;
margin:20px auto 20px auto;
text-align:justify;
border:2px solid #389CF2;
border-radius:8px;
background-color:#F5F5F5;
background-image:url(http://i61.tinypic.com/1oxi50.png);
background-repeat:no-repeat;
background-position:8px 11px;
}
I need to display two divs one next to another on the same line, but I can't understand why the second one is slightly lower than the first one.
<div class="cont-title">
<div class="triang-header"></div>
<div class="h2-stripe">
<h2 itemprop="name">
Title
</h2>
</div>
</div>
This is the css:
.cont-title{
margin-right: -7px;
min-width: 90%;
max-width: 100%;
height:51px;
float:right;
text-align:right;
white-space: nowrap;
}
.triang-header{
position:relative;
width:39px;
height:38px;
display:inline-block;
background:url('../images/titlebar.png') no-repeat top left;
}
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
What am I doing wrong?
I think you did not count the line-height,
should be like this the style for .h2-stripe:
.h2-stripe{
position:relative;
line-height: 23px; // <----
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
box-shadow: 2px 3px 5px 0 #555;
}
here it is an example with line-height:23px for .h2-stripe: http://jsfiddle.net/6a0ga3uq/
you misspelled your class
.h2-strispe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
should be
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
The margin of your h2 element causes the second div to shift down. Also, you should vertical-align inline-block elements. See this updated snippet (also with corrected class name in CSS).
.cont-title{
margin-right: -7px;
min-width: 90%;
max-width: 100%;
height:51px;
float:right;
text-align:right;
white-space: nowrap;
}
.cont-title > * {
vertical-align: middle;
}
.triang-header{
position:relative;
width:39px;
height:38px;
display:inline-block;
background:url('http://placehold.it/39x38') no-repeat top left;
margin: 0;
}
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
h2 {
margin:0;
}
<div class="cont-title">
<div class="triang-header"></div><div class="h2-stripe"><h2 itemprop="name">
Title
</h2>
</div>
</div>
In the second div, you have line height and lot of other stuff. So other elements can extend your div. If you want your div to be the same size regardless to its other elements you should change display attribute like this
.h2-strispe{
position:relative;
z-index:10;
display:inline-block;
box-sizing:border-box;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
You can see i added box-sizing to border-box and that will save the position of your div no matter what you do to inner elements
For some reason my object that is floated right is not displaying the same as the one I'm floating left in Firefox. The one on the right has no margin at the bottom against the footer, and the one on the left has the desired result. Any idea why it does this? Here is my CSS and my HTML:
CSS:
p {
font-family: 'Open Sans', 'sans-serif';
}
#container {
overflow:hidden;
width: 100%;
max-width:960px;
background-color: #FFFFFF;
margin-left:auto;
margin-right:auto;
}
#branding {
width:100%;
height:100px;
background-color:black;
z-align:1000;
}
#logo {
background-image:url("images/google-logo-small.png");
height:69px;
width:200px;
margin:15px 0 0 10px;
float:left;
z-align:1001;
}
#toparea {
font-family: 'Open Sans', 'sans-serif';
margin:20px 0px 20px 0;
float:right;
color:white;
z-align:1001;
}
#toparea ul li {
list-style:none;
display:inline-block;
padding:0 30px 20px 0;
}
#topcontent {
width:100%;
background-color:inherit;
margin:0;
z-align:1000;
}
#blockone {
border-radius: 15px;
width:48%;
height:200px;
background-color:gray;
float:left;
border-width:1px;
border-color:black;
margin: 10px 0 0 0;
}
#blockone p {
font-family: 'Open Sans', 'sans-serif';
font-size:20px;
color: white;
padding:20px 0 0 20px;
}
#blocktwo {
border-radius: 15px;
width:48%;
height:200px;
float:right;
background-color:gray;
border-width:1px;
border-color:black;
margin: 10px 0 0 0;
}
#blocktwo p {
font-size:20px;
color: white;
padding:20px 0 0 20px;
}
#footer {
clear:both;
-moz-border-radius: 5px 10px 5px 10px;
border-radius: 15px;
width:100%;
height:200px;
background-color:gray;
border-width:1px;
border-color:black;
}
HTML:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='css/base.css' rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="branding">
<div id="logo"></div>
<div id="toparea">
<ul>
<li>Content</li>
<li>Content2</li>
</ul>
</div>
</div>
<div id="topcontent">
<div id="blockone">
<p>some copy</p>
</div>
<div id="blocktwo">
<p>this is more text</p></div>
</div>
<div id="footer"><p>Some more copy</p></div>
</div>
</div>
</body>
</html>
Margins of sibling elements inside the same element add up. To correct this, replace this...
#blocktwo {
border-radius: 15px;
width:48%;
height:200px;
float:right;
background-color:gray;
border-width:1px;
border-color:black;
margin: 10px 0 0 0;
}
... with this...
#blocktwo {
border-radius: 15px;
width:48%;
height:200px;
float:right;
background-color:gray;
border-width:1px;
border-color:black;
margin-bottom: 10px; /* <-- this is what I changed */
}
HERE IS A DEMO
You have different margins set for the item you're floating left, and the item you are floating right. You also need to ensure they have the same height if you want them to display lined up with the same margins. Also, Z-Align is not valid CSS.
Try this:
#logo {
background-image:url("images/google-logo-small.png");
height:69px;
width:200px;
margin:15px 0 0 10px;
float:left;
}
#toparea {
font-family: 'Open Sans', 'sans-serif';
height:69px;
margin:15px 0 0 10px;
float:right;
color:white;
}
#toparea {
margin:20px 0px 20px 0;
}
This is your problem. The bottom margin on the navigation div is pushing the content below it. Remove the bottom margin and it will behave as expected.
There are a lot of varying length tag divs in tag wrapper div. There isn't any problem for IE8,9, FF,Chrome,Safari and opera but it broken for IE7. How can I fix this issue?
HTML:
<div class="tag-wrapper">
<div class="tag">text text text</div>
<div class="tag">text text</div>
<div class="tag">text text</div>
<div class="tag">text text text</div>
<div class="tag">text text text text</div>
</div>
CSS:
.tag-wrapper{
float: left;
height: 200px;
padding: 12px 12px 12px 20px;
width: 500px;
overflow:hidden;
border:1px solid #000;
}
.tag-wrapper .tag{
background:url(img/corner02.png) no-repeat 0 0;
vertical-align:middle;
padding: 0 0 0 10px;
display:inline-block;
height:24px;
margin: 0 10px 9px 0;
float:left;
}
.tag-wrapper .tag a:link{
width:auto;
overflow:visible;
height:24px;
line-height:24px;
padding:0 5px 0 5px;
background:#F00;
float:left;
color:#FFF;
text-decoration:none;
font-weight:bold;
}
.tag-wrapper .tag a:hover{
color:#000;
}
Screenshot for IE8,IE9,Chrome,Firefox,Safari,Opera
Screenshot for IE7
http://jsfiddle.net/B7Tjw/2/
try this code: it is working fine.
.tag-wrapper .tag a:link{
width:auto;
overflow:visible;
height:24px;
line-height:24px;
padding:0 5px 0 5px;
background:#F00;
float:left;
color:#FFF;
text-decoration:none;
font-weight:bold;
white-space:pre;
}
I have the following code but I am unsure how I would adjust it so that I have 2x boxes left and right of the center box with about 20px margin on the monitor side of the boxes and a 10 to 15px margin in between the boxes.
I also cannot seem to get them aligned in a straight line. I am aware I only have one left box at the moment.
jsFiddle:
http://jsfiddle.net/qY6BT/
CSS:
body{
background-repeat:repeat;
background-image:url('../images/bg.jpg');
}
h1{
text-align:center;
color:#8f4988;
}
.bold{
font-weight: bold;
}
a{
font-weight: bold;
color:#8f4988;
}
p{
margin: 5px 25px 0 25px;
text-align:left;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#wrapper{
margin:8% auto;
background-color:#e3e3e3;
border-radius:5px;
width:550px;
min-height:350px;
}
#logo{
width:150px;
margin:0 auto;
padding:10px 0 10px 0;
}
#socialMedia{
float:right;
width:205px;
height:64px;
margin:10px 0 0 0;
}
#socialMedia p {
float:left;
margin:0 auto;
}
#socialMedia .twitter{
width:49px;
height:64px;
background:url('../images/twittericon.png') no-repeat;
}
#socialMedia .facebook{
width:49px;
height:64px;
background:url('../images/facebookicon.png') no-repeat;
}
#socialMedia .linkedin{
width:49px;
height:64px;
background:url('../images/linkedinicon.png') no-repeat;
}
#portfolio{
height:350px;
width:350px;
margin:-452px 0 0 5px;
background-color:#e3e3e3;
border-radius:5px;
}
#portfolio h3{
padding:15px 0 10px 0;
text-align: center;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#portfolio li{
text-align: center;
padding:0 0 15px 0;
}
#portfolio li a{
font-weight: normal;
color:#000;
text-decoration: none;
}
HTML:
<div id="wrapper">
<div id="logo">
<img src="_assets/images/logo.png" alt="Logo">
</div>
<h1>H1</h1>
<div class="paragraphContent">
<p>Content</p>
<br/><br/>
<p>
Regards,
</p>
<p class="bold">Name</p>
</div>
<div id="socialMedia">
</div>
</div>
<div id="portfolio">
<h3>Portfolio</h3>
<ul>
<li>Text</li>
</ul>
</div>
Are you trying to achieve this?
http://jsfiddle.net/qY6BT/1/