I have this data:
<div id="results">
<span id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</span>
</div>
I'm trying to emulate this:
Here is my CSS Code:
#results {
width: 700px;
margin: 0px auto;
border: 1px solid black;
}
#row {
width: 85%;
margin: 0px auto;
border: 2px solid green;
}
#left {
float: left;
width: 200px;
margin: 5px 5px 5px 5px;
border: 1px solid blue;
}
#middle {
float: left;
width: 200px;
margin: 5px 5px 5px 5px;
border: 1px solid blue;
}
#right {
float: left;
width: 200px;
margin: 5px 5px 5px 5px;
border: 1px solid blue;
}
<div id="results">
<span id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</span>
</div>
The problem is, that it turns out like this!
It looks fine except to the right of the right span block, that green chunk there is supposed to be the #row wrapper. Why isn't it wrapping like it should?
Define display:block or display:inline-block to your #row span Because span is an inline element which didn't take width & height by default.
Check this http://jsfiddle.net/2xufx/
Because the inner elements are using float you have to 'reset'. E.g. by using overflow: hidden; on the parent.
Also you are trying to set a width on an inline element (the span), which cannot be done. Change it to either block or inline-block.
Perhaps this may help you
<html>
<head>
<style type='text/css'>
#results {width: 700px; margin: 0px auto; border: 1px solid black; min-height: 50px;}
#row {width: 92%; margin: 0px auto; border: 2px solid green; min-height: 30px;}
#left {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}
#middle {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}
#right {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}
</style>
</head>
<body>
<div id="results">
<div id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</div>
<div id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</div>
</div>
</body>
</html>
The Out put which i get it
You need to add overflow: auto to the #results and to the #row definition, and you also need to add display: block to #row (or just make it a block element for e.g. a <div/>) to make it work.
CSS:
#results { width: 700px; margin: 0 auto; border: 1px solid black; overflow: auto; }
#row { display: block; width: 85%; margin: 0 auto; border: 2px solid green; overflow: auto; }
#left { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }
#middle { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }
#right { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }
See the working jsfiddle here.
But keep in mind that width (200px) + the border (2px) + margin (10px) = 212px, multiplying it by 3 = 636px, and 85% of 700px is 595px that's why it does not fit.
Related
I would like div#alpha1 and div#alpha2 inside the div#alpha placed side by side.
CODE
#alpha {
position: relative;
padding-top: 4px;
margin-top: 8px;
margin-left: 2%;
margin-right: 2%;
width: 96%;
height: 100px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
}
#alpha1 {
position: relative;
width: 94px;
height: 94px;
border: 1px solid black;
margin-left: 2%;
}
#alpha2 {
position: relative;
margin-top: 0px;
height: 40px;
border-top: 1px;
border-bottom: 1px solid black;
margin-left: 94px;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="img/jenny.jpg" width="94px" height="94px">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
you can use flexbox for that by using display:flex in parent and then flex:1 in #alpha2 to make it grow according to screen size
Don't use HTML width/height tags, instead use CSS for styling it.
Note I did a few tweaks to your code.
#alpha {
padding-top: 4px;
margin: 8px 2% 0;
width: 96%;
height: 100px;
border: solid black;
border-width: 1px 0;
display: flex
}
#alpha1 {
width: 94px;
height: 94px;
border: 1px solid black;
margin: 0 2%;
}
#alpha2 {
flex: 1
}
#alpha2 h1 {
border-bottom: 1px solid black;
height: 40px
}
<div id="alpha">
<div id="alpha1">
<img src="//lorempixel.com/94/94" />
</div>
<div id="alpha2">
<h1 id="patientname">Jenny Thomas</h1>
</div>
</div>
The easiest/fastest solution is to assign display: flex to the container #alpha
http://codepen.io/anon/pen/mPgaJP
(I also erased some unneccesary settings in there)
You just needed to set the float property of your div. Here you are :-
#alpha{
position:relative;
padding-top:4px;
margin-top:8px;
margin-left:2%;
margin-right:2%;
width:96%;
height:100px;
border-top:1px solid black;
border-bottom:1px solid black;
float: none;
}
#alpha1{
position:relative;
width:94px;
height:94px;
border:1px solid black;
margin-left:2%;
margin-right: 0px;
float: left;
}
#alpha2{
position:relative;
margin-top:0px;
height:40px;
border-top:1px;
border-bottom:1px solid black;
margin-left:9%;
float: next;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvU-f_zys67Kv6hdqJcmSN5n_dfe2igiq9lLZYpcXAyVXEBNQ6" width="94" height="94" alt="IMAGE">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
I edited your margin in alpha2 for correct display of bottom line. It is displayed correct in browser. Here it is not. You can check it here. Mark the problem solved if it helps.
Look at the next image. I drew three rectangules (black, red and yellow) and each one receives different widths:
First column: 33%
Segund column: Remaining width (?)
Third column: 15px;
All of them are float. My first try was putting the first two columns, but was not a big deal (putting 66% in the second), but when I introduced the third column, I got trouble. I´m not sure what approach could I use to deal with these widths.
This is the DOM I have created:
<article class="cart-item">
<div class="left">
<img src="images/item1.jpg"></img>
</div>
<div class="center">
<h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
<span class="description">Shipping 3-day with UPS</span>
<span class="description">Color: Gray</span>
<span class="description">Size: 28.5</span>
<span class="price">$60.00</span>
</div>
<div class="right">
</div>
</article>
Some of the CSS I have:
.left {
float: left;
width: 33.33%;
padding-left: 15px;
}
.center{
float: left;
width: ?;
padding-left: 15px;
padding-right: 15px;
}
.right {
float: left;
width: 15px;
background-color: #CCCCCC;;
}
First column: 33% Second column: Remaining width (?) Third column:
15px;
All of them are float.
If you are stuck up with float and cannot change the markup, then a simple calc would serve your purpose. But, that will introduce other problems. You will need to specify the height of the container, otherwise getting the images to align will become a nightmare for you. Especially the last one.
It will look something like this:
.cart-item {
width: 320px; height: 120px; overflow: hidden;
border: 1px solid #ccc;
}
.cart-item > div { float: left; height: 100%; }
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3; }
.cart-item .center {
width: calc(100% - 33% - 15px);
border: 1px solid #e66;
}
Demo Fiddle 1: http://jsfiddle.net/abhitalks/3sz149f0/
Demo Snippet 1:
.cart-item, .cart-item * { box-sizing: border-box; }
.cart-item {
width: 320px; height: 120px; overflow: hidden;
border: 1px solid #ccc;
}
.cart-item > div { float: left; height: 100%; }
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3; }
.cart-item .center {
width: calc(100% - 33% - 15px);
border: 1px solid #e66;
}
<article class="cart-item">
<div class="left">
<img src="//placehold.it/64x64/66c"></img>
</div>
<div class="center">
<h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
<span class="description">Shipping 3-day with UPS</span>
<span class="description">Color: Gray</span>
<span class="description">Size: 28.5</span>
<span class="price">$60.00</span>
</div>
<div class="right">
</div>
</article>
If you can change the markup and styles, then do not use float. Just use a table layout and then it would be super easy for you to arrange the content without relying on explicit height on the container.
It will look something like this:
.cart-item {
display: table;
width: 320px; overflow: hidden;
border: 1px solid #ccc;
}
.cart-item > div {
display: table-cell; vertical-align: middle; text-align: center;
}
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3; }
.cart-item .center {
width: calc(100% - 33% - 15px);
border: 1px solid #e66; text-align: left;
}
Demo Fiddle 2: http://jsfiddle.net/abhitalks/d1qdyxrf/
Demo Snippet 2:
.cart-item, .cart-item * { box-sizing: border-box; }
.cart-item {
display: table;
width: 320px; overflow: hidden;
border: 1px solid #ccc;
}
.cart-item > div {
display: table-cell; vertical-align: middle; text-align: center;
}
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3; }
.cart-item .center {
width: calc(100% - 33% - 15px);
border: 1px solid #e66; text-align: left;
}
<article class="cart-item">
<div class="left">
<img src="//placehold.it/64x64/66c"></img>
</div>
<div class="center">
<h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
<span class="description">Shipping 3-day with UPS</span>
<span class="description">Color: Gray</span>
<span class="description">Size: 28.5</span>
<span class="price">$60.00</span>
</div>
<div class="right">
<img src="//placehold.it/6x32/666"></img>
</div>
</article>
Try
div.center { width: calc(66% - 45px); }
45px = 30px padding + 15px width of right column
I've the below html code.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="margins">
<head>
<meta charset="utf-8" />
<style type="text/css">
.main {
width: 900px;
height: 320px;
border: 1px solid black;
position:relative;
}
.margins {
padding:10px 10px 10px 10px;
border: 1px solid black;
}
.top_H {
width: 720px;
height: 80px;
border: 1px solid black;
}
.mid {
display: inline-block;
clear: both;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid black;
}
.mid_L {
width: 200px;
height: 120px;
float: left;
margin-right:10px;
border: 1px solid black;
}
.mid_C {
width: 200px;
height: 120px;
float: left;
border: 1px solid black;
margin-right:10px;
}
.mid_R {
width: 200px;
height: 120px;
float: left;
border: 1px solid black;
}
.bot {
display: inline-block;
clear: both;
margin-bottom: 10px;
border: 1px solid black;
}
.bot_L {
width: 450px;
height: 80px;
float:left;
border: 1px solid black;
}
.bot_R {
width: 200px;
height: 80px;
float: left;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="main">
<div class="margins">
<div class="top_H"></div>
<div class="mid">
<div class="mid_L"></div>
<div class="mid_C"></div>
<div class="mid_R"></div>
</div>
<div class="bot">
<div class="bot_L"></div>
<div class="bot_R""></div>
</div>
</div>
</div>
</body>
</html>
here i am trying to create a container div(margins) inside the main div, with the gap of 10 px on each side, but when i view it in web browser it is overlapped. please let me know where am i going wrong.
Here is the fiddle.
Thanks
Offcourse it is overlapping. in your .main class you have set a height, and it's not high enough. also, if you want to be absolutely sure that nothing goes over your div, set an overflow in the css !
make height of main div auto :
.main {
width: 900px;
height: auto;
border: 1px solid black;
position:relative;
}
DEMO : http://jsfiddle.net/V9N3u/2/
Now define your .main min-height and remove height
as like this
.main {
height: 320px; // remove this
min-height: 320px; // add this
}
try this
min-height for .main class
.main {
width: 900px;
min-height: 320px;
border: 1px solid black;
position:relative;
}
The others are right about the height.
You may also want to remove the margin-bottom of .bot to get rid of the extra spacing (unless that's on purpose):
.bot {
display: inline-block;
clear: both;
margin-bottom: 10px; //remove
border: 1px solid black;
}
And you also have one too many " in your html:
<body>
...
<div class="bot_R""></div>
How to center squares in the wrapper without using text-align:center?
I need this because it also centers all text in squares, but I don't need this.
HTML :
<div id="wrapper">
<div id="squares">
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
</div>
</div>
CSS:
html, body{
height: 100%;
}
body {
line-height: 18px;
}
#wrapper{
width: 960px;
height: 100%;
border: 1px solid red;
margin: 0 auto;
}
.square {
width:251px;
height:207px;
border: 1px solid #d6d6d6;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
box-shadow: 1px 1px 3px rgba(0,0,0,.1);
margin: 10px;
overflow:hidden;
position:relative;
background-color:#fff;
display: inline-block;
cursor: pointer;
}
#wrapper{
...
text-align: center;
}
.square {
...
text-align: left;
}
---- Another way (I don't recommed!)
How to find 52px: (width of div - (#of squares * width of one square))/ #of squares+1 ->
(960-(250*3))/4
#wrapper{
...
padding-left:52px;
}
.square {
...
margin: 10px 52px 10px 0;
}
You can try:
.squares {
margin-left:auto;
margin-right:auto;
}
Since it is text inside the squares you are styling you could put an H or P tag around the text and then text-align: left; them.
So I'm trying to create a forum with avatars, but right now the text is going below the avatars and not beside them. How can I fix this?
Here is the CSS:
.postbox{
text-align: left;
margin: auto;
background-color: #dbfef8;
border: 1px solid #82FFCD;
width: 100%;
margin-top: 10px;
}
.postfooter{
width: 100%;
border-top: 1px solid #82FFCD;
}
.postheader{
width: 100%;
border-bottom: 1px solid #82FFCD;
}
.posttext{
width: 70%;
text-align: left;
border: 1px solid #82FFCD;
}
.postavi{
width: 20%;
text-align: left;
border: 1px solid #82FFCD;
}
and here is the html:
<div class="postbox"><div class="postheader">
<b><span>CyanPrime!!~::##Admin##::~</span></b>
</div>
<div class="postavi"><img src="http://prime.programming-designs.com/test_forum/images/avatars/hacker.png" alt="hacker"/></div><div class="posttext">Let's test the Hacker Avatar.</div>
<div class="postfooter">
[Reply] 0 posts omitted.
</div>
</div>
You can wrap your divs in a container div and float everything left. Remember to clear your floats.
.clear { clear: both; }
.posttext{
float: left;
width: 70%;
text-align: left;
border: 1px solid #82FFCD;
}
.postavi{
float: left;
width: 20%;
text-align: left;
border: 1px solid #82FFCD;
}
<div>
<div class="postavi"><img src="http://prime.programming-designs.com/test_forum/images/avatars/hacker.png" alt="hacker"/></div>
<div class="posttext">Let's test the Hacker Avatar.</div>
<br class="clear"/>
</div>
This should do it:
.postavi{ float: left}
Add the CSS "float: left;" to the element that must allow the text to be placed side-by-side.