I have a problem vertically centering 2 divs beside each other:
DIV 1 & 2:
And this is what I want to achieve. I would prefer a solution that works for any resolution, or changes with the size on the parent div.
My Goal:
You can clearly see the difference; the text and image are correctly vertical aligned. :)
And this is my code simplyfied:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
</head>
<body>
<div class="bet-content">
<div class="bet-prof" style="display: inline-block;">
<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/b4/b441963ddcb84390a0caafbb7b7399b0cffbccba_medium.jpg" style="border-radius: 20px;">
</div>
<div class="bet-desc" style="display: inline-block;">
<span style="font-size: 18px; display: block;">Insanic as <img src="https://csgoreaper.com/assets/images/coinflip/coin-ct.png" style="vertical-align:middle;" height="32px"></span>
<span>With a wager of <span style="color: #e7aa18;">$20.0</span></span>
</div>
</div>
</body>
</html>
Flexbox comes to mind:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
</head>
<body>
<div class="bet-content" style="display: flex; align-items:center;">
<div class="bet-prof" style="display: inline-block; background: red;">
<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/b4/b441963ddcb84390a0caafbb7b7399b0cffbccba_medium.jpg" style="border-radius: 20px;">
</div>
<div class="bet-desc" style="display: inline-block; background: green;">
<span style="font-size: 18px; display: block;">Insanic as <img src="https://csgoreaper.com/assets/images/coinflip/coin-ct.png" style="vertical-align:middle;" height="32px"></span>
<span>With a wager of <span style="color: #e7aa18;">$20.0</span></span>
</div>
</div>
</body>
</html>
Related
I have two boxes set up and i wanted to put some buttons and text in the middle but when ever I try to add text there it makes the far right box go down one. I want them to stay aligned.
I tried adding another between the 2 boxes but this did not work. im new at html so im not sure how to format this.
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 300px; float:left; border: 15px solid green; height:300px; background:white; margin:10px">
Inventory
<br />
Bronze: <span id="Bronze">0</span>
<br />
Silver: <span id="Bronze">0</span>
<br />
Gold: <span id="Bronze">0</span>
<br />
Diamond: <span id="Bronze">0</span>
</div>
<div style="width: 300px; float:right; border: 15px solid green; height:300px; background:white; margin:10px">
Skills
<br />
Strength: Lv <span id="Strengthlv">1</span> <span id="StrengthCexp">0</span> / <span id="StrengthMexp">100</span>
<br />
Magic: Lv <span id="Magiclv">1</span> <span
id="MagicCexp">0</span> / <span id="MagicMexp">100</span>
<br />
<button onclick="Magicexp()">Click Me!</button>
<br />
</div>
<script type="text/javascript" src="Skills.js"></script>
</body>
</html>
</p>
</div>
</body>
</html>
I expect the buttons / words I want to put in the middle of these 2 boxes to not upset the alignment. But my actual output is words and buttons move the far right box down.
There are multiple ways to approach this problem, just to include a few here in the below code:
You can use bootstrap to implement a grid system, here's the bootstrap grid system reference.
I have included the grid system in your code. To do that, first is to include bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
What the grid system does is it breaks the width of your row into 12 equal columns, and in the code below, the left box takes 5 columns and the right box takes 5 columns, and the center where you want to add text and stuff will take 2 columns, totaled 12 columns. To do that we add class="col-sm-5" for 5 columns for example, (you can use col-lg-5 etc. you can look it up for more details, basically this has to do with the Responsiveness of your page).
We can also implement max-width to limit the maximum width of your center div, and use overflow wrap to control the overflow. Look up CSS overflow to see what are your options. One of them is to make a scrolling effect if the elements in the center is too big. That way if it overflows and push the right box to the bottom, you can do a scrolling effect so the right box stays where it is.
In the code below overflow-wrap: break-word; is used if you were to put text in the middle.
You can also utilize the position:absolute; attribute to position your right box in a absolute position, that way it won't be pushed down. See position for reference.
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="nav_bar">
<ul>
<li>
Home
</li>
<li>
SkillTree
</li>
<li>
Equipment
</li>
<li>
Pets
</li>
<li>
Skills
</li>
<li>
Quests
</li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div class="container">
<div class="row">
<div style="float:left; border: 15px solid green; height:300px; background:white; margin:10px" class="col-sm-5">
Inventory
<br />Bronze:
<span id="Bronze">0</span>
<br />Silver:
<span id="Bronze">0</span>
<br />Gold:
<span id="Bronze">0</span>
<br />Diamond:
<span id="Bronze">0</span>
</div>
<div style="max-width: 30px; overflow-wrap: break-word;" class="col-sm-2">
<h1>lkjdlfkjdlkfjdljfdlkjfdlkjfd</h1>
</div>
<div style="width: 300px; float:right; border: 15px solid green; height:300px; background:white; margin:10px;" class="col-sm-5">
Skills
<br />Strength: Lv
<span id="Strengthlv">1</span>
<span id="StrengthCexp">0</span> /
<span id="StrengthMexp">100</span>
<br />Magic: Lv
<span id="Magiclv">1</span>
<span
id="MagicCexp">0</span> /
<span id="MagicMexp">100</span>
<br />
<button onclick="Magicexp()">Click Me!</button>
<br />
</div>
</div>
</div>
<script type="text/javascript" src="Skills.js"></script>
</body>
</html>
</p>
</div>
</body>
</html>
I added a flexbox to your code. I hope this was helpful.
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
<style>
.flex-container {
display: flex;
align-items: stretch;
}
.flex-container>div {
width: 600px; /*change the max columb width*/
background-color: #f1f1f1;
border: 15px solid green;
background:white;
margin: 10px;
text-align: center;
font-size: 15px;
}
</style>
</head>
<body>
<div class="main_container">
<div class="flex-container">
<div style="order: 1">
<p><b>Inventory</b></p>
<p>Bronze: <span id="Bronze">0</span></p>
<p>Silver: <span id="Bronze">0</span></p>
<p>Gold: <span id="Bronze">0</span></p>
<p>Diamond: <span id="Bronze">0</span></p>
</div>
<div style="order: 3">
<p><b>Skills</b></p>
<p>Strength: Lv <span id="Strengthlv">1</span> <span id="StrengthCexp">0</span> / <span id="StrengthMexp">100</span><p/>
<p>Magic: Lv <span id="Magiclv">1</span> <span
id="MagicCexp">0</span> / <span id="MagicMexp">100</span></p>
<button onclick="Magicexp()">Click Me!</button>
</div>
<div style="order: 2">
<h1>content</h1>
</div>
<!-- You can add more div's here, if you want -->
</div>
</div>
</body>
</html>
If you have any questions, go ahead!
The last images and the text is not properly aligned. Here's the code:
<html>
<head>
<title>PODAR Ahmedabad!</title>
</head>
<body bgcolor="BFFFC2">
<div id="main">
<hr size="7">
<div id="header">
<div align="left">
<img src="podar.jpg" width="25%" height="20%">
</div>
<h1 align="center"><font size="7"><font face="Papyrus">Welcome to </font><b><font color="34C510" face="SketchFlow Print"> PODAR </font></b><font face="Papyrus"> ahmedabad!</font></font></h1>
<div align="right">
<img src="school.jpg" width="25%" height="20%">
</div>
</div>
<hr size="7">
</div>
</body>
dimension of the first image is 300*105 and second image is 244*244
Use css inline
<div style="display:inline">
<img src="podar.jpg" width="25%" height="20%">
</div>
<h1 style="display:inline"><font size="7"><font face="Papyrus">Welcome to </font><b><font color="34C510" face="SketchFlow Print"> PODAR </font></b><font face="Papyrus"> ahmedabad!</font></font></h1>
<div style="display:inline">
<img src="school.jpg" width="25%" height="20%">
</div>
Not: Do not use font tags.. And must embeded fonts in site;
visit : https://www.google.com/fonts
example : adding in head tags for Shadows Into Light font :
https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<html>
<head>
<title>PODAR Ahmedabad!</title>
<style>
#main {
display: block;
width: auto;
}
.fontPapyrus{
font-family:"Papyrus";
}
.fontSize36{
font-size:48px;
}
.fontBold{
font-weight: bold;
}
.colorGreen{
color:#34C510;
}
.fontSketchFlowPrint{
font-familiy:"SketchFlow Print";
}
.inlineBlock{
display:inline-block;
}
.verticalAlignMiddle{
vertical-align: middle;
}
</style>
</head>
<body bgcolor="BFFFC2">
<div id="main">
<hr size="7">
<div id="header">
<div class="inlineBlock verticalAlignMiddle">
<img src="podar.jpg" width="25%" height="20%" valign="top">
</div>
<h1 align="center" class="inlineBlock verticalAlignMiddle">
<span class="fontSize36 fontPapyrus">Welcome to
<span class="fontBold colorGreen fontSketchFlowPrint">PODAR</span>
</span>
<span class="fontPapyrus">ahmedabad!</span>
</h1>
<div align="right" class="inlineBlock verticalAlignMiddle">
<img src="school.jpg" width="25%" height="20%" valign="top">
</div>
</div>
</div>
</body>
It is because there isn't enough space, so either add space to the element that contains the 3 things or make those smaller. With space I'm talking about Width.
I have a responsive <div> element placed in between two fixed <div> elements. I've tried the following code:
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="width: auto">
<div style="float: left; width:270px; background-color: green">Fixed div</div>
<div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
<div style="background-color: red" class="row">Responsive div</div>
</div>
</body>
</html>
Currently the responsive <div> element is taking the whole screen. When I try to checkout the width and height, it has acquired my entire main <div>. Is there any approach where I can put this responsive <div> inside 2 fixed <div>?
Check below code: Here I have altered Div sequence and change display style of the three.
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="display:table; width:100%">
<div style="display:table-cell; width:270px; background-color: green">Fixed div </div>
<div style="background-color: red; display:table-cell;"> Responsive div </div>
<div style="display:table-cell; width: 120px; background-color: yellow"> Fixed div</div>
</div>
</body>
</html>
Since you got their div widths already, we can took advantage of the calc
width: calc(100% - 390px);
The 390px value is the sum of the width of left and ride side elements.
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="width: auto">
<div style="float: left; width:270px; background-color: green">Fixed div </div>
<div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
<div style="background-color: red; width: calc(100% - 390px);margin-left: 270px;" class="row"> Responsive div </div>
</div>
</body>
</html>
Try with this:
<body style="display:table;width:100%;">
<div style="float: left; width:270px; background-color: green;display:table-cell;">Fixed div </div>
<div style="background-color: red;display:table-cell;" class="row"> Responsive div </div>
<div style="float: right; width: 120px; background-color: yellow;display:table-cell;"> Fixed div</div>
</body>
Everything was perfect, until I changed a width. Instead of wrapping to a new line like normal when it gets to the div boundary, it extrudes from the box. The line length is the same as it was BEFORE I changed the div width. The line width not change to accommodate the change in div width as one would expect.
Page in question
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to TF2Shop</title>
<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="../main.css" />
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
<!-- Icomoon -->
<link rel="stylesheet" type="text/css" href="../icomooncss/style.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">TF2 Shop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Bank</li>
<li class="active">About</li>
<li><i class="icon-envelope" style="margin-right: 4px;"></i>Contact</li>
<li><i class="icon-heart" style="margin-right: 4px;"></i>Donate</li>
</ul>
</div><!--/.nav-collapse -->
<div style="float: right; margin-top: 8px;"><img src="../images/steam.png" /></div>
</div>
</div>
</div>
<div id="wrapper" style="height: 600px">
<div id="main-container">
<div id="about-section">
<ul>
<h1 style="text-decoration: underline; padding-top: 50px;">About</h1>
<li style="margin-bottom: 100px;">TF2bank was created by Josh Osborne, who is also the creator of Viddir.com. TF2 was the very first game he played on Steam and will always have a special place in his heart.</li>
<h1 style="text-decoration: underline;">Technology</h1>
<li style="margin-bottom: 100px;">TF2bank was built using HTML and CSS. SteamBot, written by Jesse Cardone is the base engine for the trade bots.</li>
<h1 style="text-decoration: underline;">Special Thanks</h1>
<li>Special thanks goes to Jesse Cardone, creator of SteamBot. Special thanks also goes to Valve for creating TF2 and Steam. And of course special thanks does to Slender Man from the StrangeBank for first
helping me code my first buds bot script and was patient and helpful the whole time!</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="copyright">© TF2Shop 2013</div>
<!-- <div id="info">A Slender Mann and Whizzard of Oz Collaboration</div> -->
<div style="color: #2f3034; height: 135px; width: 320px; padding-top: 30px; margin: 0 auto; font-family: 'Oswald', sans-serif; text-transform: uppercase; text-align: center;">
<div style="">
<h1 style="font-size: 57px; margin-top: -24px; padding-top: 3px; font-weight: bold; line-height: 56px;"><span style="font-size: 29px">Powered by</span><br /><span style="color: #313131; margin-left: -4px;">Steam</span></h1>
</div>
</div>
</div>
</body>
</html>
Your main-container is larger than your wrapper div.
#main-container {
width:1100px;
...
}
#wrapper {
width:1050px;
...
}
Your problem is that you've set the #wrapper div to 1050px and its child div main-container to 1100px.
If you want your wrapper div to be the same width as your container div just use this:
#wrapper {
width: 100%;
}
Now you can change the main container div without having to update the wrapper.
Your #wrapper has a CSS width of 1050px.
Your #main-container has a CSS width of 100px.
Thus the main-container div extends beyond the #wrapper div.
Either adjust the CSS width of #main-container, or clip the overflow by adding overflow: hiddenor overflow: scroll to #wrapper.
I'm trying to get a bunch of div's to wrap around an image, but am failing.
Since pasting HTML doesn't seem to work in StackOverFlow, here is my current attempt at emulating a Outlook 2010 contact entry.
Source from: http://www.perfmon.com/download/contactdivtest.htm
(edit: or check out #Hristo's cool online editor )
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</body>
</html>
Can anyone tell me what I need to do to make all the div's move up and wrap around the image? I really hope I'm not missing something simple...
Here is the target layout I'm attempting:
alt text http://perfmon.com/download/contactdivtest.bmp
foor your specific solution span can work better for you:
check the version with span:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
.contactLarge span{
font-weight: bold;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="http://www.perfmon.com/download/ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<span>LastName, Firstname</span> <br />
<span>CompanyName</span> <br />
<span >Title</span> <br>
<span >Work#</span> <br>
<span >Mobile#</span> <br>
<span >Home</span> <br>
<span >email1</span> <br>
<span >email2</span> <br>
<span >email3</span> <br>
<span >Street</span> <br>
<span style="background-color:#F1F5F9; float:left;" >City,</span> <br>
<span style="background-color:#F1F5F9; float:left;" >State</span> <br>
<span style="background-color:#F1F5F9;" >Zip</span> <br>
<span style="background-color:#F1F5F9;" >httppage</span> <br>
<span style="background-color:#F1F5F9; ">im</span> <br>
</div>
</body>
</html>
Div is a block-level element. It will take up full width and generate a break before and after.
Img is, by default, an inline element. You want to wrap it in another one (not float). Either use span's instead (span is div's inline brother) or set the css display property to inline on the div.
A very useful trick for these sorts of things is the "display: inline-block".
It displays things inline (so the wrapping will work), but leaves you with almost the full configurability of a block-level element.
A <div> is a block level element - this means that it automatically clears to a new line and has 100% width. Without seeing your html or css it's hard to see where you're going wrong but try using float:
div {
float: right;
width: 50%;
}
Edit:
Now that you've posted a picture of what you want I can say that you'll probably want something like this:
HTML:
<div id="container">
<img src="foo.jpg" />
<div id="content">
<p>Blah blah</p>
<p>More blah blah</p>
</div>
</div>
CSS:
#content {
width: 60%;
float: right;
}
Just make sure that the width of the img + width of the inner div is less than the width of the containing div.
If you create a "textbox" div around your text and float it left you should be good to go. See:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.textbox {
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
<div class="textbox">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</div>
</body>
</html>