I want to achieve this:
I want to display boxes, one main box and below each box a smaller box as you can see in the picture. I define this with the following html structure:
<div class='content'>
<div class='box'>
<a>test</a>
<div class='money'><div id='maxnumber'>
<h3 id='max'>max</h3><h3 id='digit'>0000</h3>
</div></div>
<div id='numbereuro'><h3 id='digit2'></h3>
<h3 id='euro'></h3>
</div>
</div>
<div class='utility'>test</div>
</div>
Here is a working example that shows the result without the smaller box: http://jsfiddle.net/
.box names the bigger box and .utility the smaller box below bot wrapped in .content. I use the following css:http://jsfiddle.net/76fXa/
.content {
margin: 5px;
padding: 5px;
font-size: 11px;
float: left;
}
.utility{
position:relative;
height:50px; width:100px; background:red;
}
.box {
margin: 5px;
padding: 5px;
background: #BBE3A8;
font-size: 11px;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.box {
position: relative;
padding: 5px;
width: 180px; height:auto;
cursor:pointer;
}
and I get the following result: http://jsfiddle.net/76fXa/1/
any ideas?
How about this quick fiddle I just made for you.
http://www.jsfiddle.net/ozzy/F3K8k/
Both .box and .utility should be put in another floated div so that they both are constrained within. Just a simplified example
<div id="content">
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
</div>
(attempting to preserve your class names where practical)
You could then set the inner divs to display block so that they fill the constrained area and set a fixed width to section (I will use 50% for demo purposes)
.section
{float:left; width:50%;}
.box
{display:block;}
.utility
{display:block;}
Set the other style properties as needed, and remember the box model when adjusting padding and margins. Sometimes applying too much or too little of either can break off to a newline if something is set wrong.
From what you provided I can't see why position relative would be necessary. If it was intended as an attempt to make the layout you demonstrated then I'd suggest removing it, unless for some reason you are absolutely positioning something within that div relative to it.
EDIT: Didn't realize you had two content divs and a fiddle posted.
http://jsfiddle.net/76fXa/2/
#ArtWorkAD: Is this is how you want it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
.content {
float: left;
font-size: 11px;
margin: 5px;
padding: 5px;
}
.utility {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: red;
border-radius: 5px;
clear: left;
cursor:pointer;
float: left;
font-size: 11px;
height: auto;
margin: 5px;
padding: 5px;
width: 180px;
}
.box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #BBE3A8;
border-radius: 5px;
cursor:pointer;
float: left;
font-size: 11px;
height: auto;
margin: 5px;
padding: 5px;
width: 180px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<a>test</a>
<div class="money">
<div id="maxnumber">
<h3 id="max">max</h3><h3 id="digit">0000</h3>
</div>
</div>
<div id="numbereuro"><h3 id="digit2"></h3>
<h3 id="euro"></h3>
</div>
</div>
<div class="utility">test</div>
</div>
</body>
</html>
http://jsfiddle.net/9Ugww/
Related
I have an image which is inside a div. It appears as expected, within the div. When margin-top is added, the background for this div extends downwards. I don't want to have this behavior. How can I change this?
My code is as follows :
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
This ensures that the column with the <p> tag goes on the left side of the screen, and the column with the image goes on the right, and it resizes as you resize the window :).
How can I make this webpage go from
-----div-----------
Text Image
-----/div-----------
to
-----div------------
Text
--/div--Image----
Image illustrating what I would like :
Edit:
I originally skipped over the fact that you provided some HTML and CSS in the question, so in my original answer I just went off the image provided. Looking at the HTML and CSS you provided, the only thing you'd have to do to get the desired result is set a negative bottom margin in your CSS on the img tag. Here's a jsFiddle using your original markup with the only significant addition to the CSS being the negative bottom margin set on the img tag.
The added benefit of doing it this way is that the image will stay in the desired spot (extended slightly below the div that contains it), even when adding more lines of text to the paragraph (p) changes the height of the containing element (.page div).
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
img {
margin-bottom:-50px;
}
Original answer:
You could just position the image below the text, float the image, and set a negative top margin on the image to make it cut back into the element containing the text. This way, the image will keep sitting in the right spot, even when adding more lines of text changes the height of the containing element.
Here's a jsFiddle
HTML
<p>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>
<img />
</p>
CSS
p {
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
img {
width: 100px;
height: 100px;
background-color: yellow;
border: 3px solid black;
float: right;
margin: -70px 100px;
}
I don't quite understand the question completely, but I coded what you wanted in css with your HTML untouched. Hopefully that helps. Check out the JSFiddle.
http://jsfiddle.net/bH8qA/
HTML:
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS:
.page{
background-color:#cc0000;
border-top:4px solid #000;
border-bottom:4px solid #000;
width:500px;
margin:0 auto;
padding: 5px;
position:relative;
}
.half{
display:inline-block;
width:44%;
vertical-align:top;
text-align:right;
}
.half + .half{
position:absolute;
top:20px;
text-align:left;
margin-left:4%;
}
.half > img{
display:block;
height:100px;
background-color:#F5EB00;
border:4px solid #000;
}
use css and use the overflow: hidden on the parent of that div.
Something like this? http://codepen.io/pageaffairs/pen/urGnL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.page {
width:500px;
margin:0 auto;
padding: 5px;
background: red;
}
.half{
width:44%;
margin:0 2%;
}
.float {
float: right;
}
.page, img {
border: 5px solid black;
}
img {
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="content">
<div class="page">
<div class="half float">
<img src="imghere.png" alt="img" />
</div>
<div class="half">
<p>Text</p>
</div>
</div>
</div>
</body>
</html>
My goal (and the question of how-to) is to have an opaque / white background with black fields over the opaque area to serve as content holders. Here is what I have now:
/* translucent background*/
.background
{
width:950px;
height:1024px;
margin: 9px auto 10px;
background-color:#ffffff;
opacity:0.35;
filter:alpha(opacity=35); /* For IE8 and earlier */
border-radius: 15px;
-moz-border-radius: 15px;
z-index:0;
}
/*content wrapper*/
.content
{
font-family: Arial;
font-size: 11px;
width:950px;
height:1024px;
margin: 9px auto 10px;
border-radius: 15px;
-moz-border-radius: 15px;
z-index:1;
}
/*one of three content fields*/
.anounce_bar
{
font-family: Arial;
font-size: 16px;
width:940px;
height:225px;
float: left;
border: 5px 5px 5px 5px;
background-color: black;
border-radius: 15px;
-moz-border-radius: 15px;
z-index:2;
}
<div class="background"></div>
<div class="content">
<!--Top announcement bar-->
<div class="anounce_bar">
</div>
<!--Left side nav bar-->
<div class="nav" style="height: 1024px; ">
</div>
<!--Right side content window-->
<div class="content_window">
</div>
</div>
Right now its showing the anounce_bar below the translucent background.. how do I get the bar (and subsequent nav & content_window) to go on top of .background?
Note: I have other content, including a top 'masthead' image and a background JPG that might be screwing with this.
Any help would be GREATLY appreciated.
Update:
This was an issue with opacity inheritance - the work around I used is described very well here
'background' class became #background without any opacity, and a new item was added:#background .transparency with absolute positioning and opacity.
<div id="background">
<div class='transparency'></div>
/*OTHER STUFF*/
</div>
Change the order
<div class="anounce_bar"></div>
<div class="background"></div>
That should work.
<div class="background">
<div class="content">
<!--Top announcement bar-->
<div class="anounce_bar" style="color: white">Anounce Bar</div>
<!--Left side nav bar-->
<div class="nav" style="height: 24px; width: 940px; background-color: green; float:left;">Nav</div>
<!--Right side content window-->
<div class="content_window" style="height: 24px; width: 940px; background-color: yellow; float:left;">Content Window</div>
</div>
</div>
Sample Code
I have a problem with Firefox to show this: (But IE show correctly)
<div id="main_div" dir="rtl">
<div dir="rtl">
<div class="outer_div" dir="rtl"> Text! </div>
</div>
<div dir="rtl">
<div class="outer_div" dir="rtl"> Text! </div>
</div>
<div dir="rtl">
<div class="outer_div" dir="rtl"> Text! </div>
</div>
</div>
======================================
body{
margin: 0px;
padding: 0px;
}
div.main_div{
border: dotted;
border-width: thin;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: #ffffaa;
border-color: #FFCC66;
width: 100%;
float: right;
}
div.outer_div{
float: right;
padding-bottom : 5px;
padding-top : 5px;
padding-left: 10px;
padding-right: 10px;
width: 33.3%;
border: dashed;
border-width:thin
}
Why this happened?! tnx
You can't have pixel based padding when using % based sizing. Even IE doesn't get it right. If you look very closely (and change the size of the window), there is a white space to the left of your first div. When you add padding, it adds to the size of the div itself, so you have a div of 33.3% width + 20px (left-right). IE interprets this incorrectly and gives you a seemingly usable result. Firefox interprets this "as is" and you get the floated div.
What you need to do is apply padding to sub-divs inside your layout divs:
EDIT: Style Elements
body{
margin: 0px;
padding: 0px;
}
div.main_div{
border: dotted;
border-width: thin;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: #ffffaa;
border-color: #FFCC66;
width: 100%;
float: right;
}
div.outer_div{
float: right;
width: 33.3%;
border: dashed;
border-width:thin
}
div.textformattingclass{
padding: 5px 10px 5px 10px;
}
HTML Elements
<div id="main_div" dir="rtl">
<div class="outer_div" dir="rtl">
<!-- remove all content formatting from the style for the outer_div
and place it in a style for this sub-div //-->
<div class="textformattingclass">
Some text!
</div>
</div>
<div class="outer_div" dir="rtl">
<div class="textformattingclass">
Some text!
</div>
</div>
<div class="outer_div" dir="rtl">
<div class="textformattingclass">
Some text!
</div>
</div>
</div>
You are missing the closing tag for the outer div, and also, no div should have the same ID on the page... You should be using the class attribute :)
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari
i am trying to center my horizontal <ul> inside a <div> (the yellow stripe in my example). the markup is below. i know that if <li> were not floated then i could do it by setting left and right margins on <ul> to "auto", but i do not seem to find a way to get rid of "float" because i need my <li> be block elements so that i could size them. please help!
thanks
konstantin
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li><div>y</div></li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Demo posted, on OP's behalf, at: jsbin.
is a block level element, and so takes up the entire width of container... also text-align is for aligning text. You could do something like:
.container ul{
width:400px;
margin:0px auto
}
Try this, works on firefox and chrome
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
text-align: center;
}
.container ul
{
display: inline-table;
text-align: center;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li>
<div>
y</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Not sure how to answer your question because I can't even see the yellow stripe in FF 3.6.8
but have a look at this http://www.cssplay.co.uk/boxes/ - there are many options and it might help you out.