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!
Related
I am trying to add a new line between the btn and the txtbox but nothing worked. I tried , and \n
It is shown as:
My code:
<td>
<div>
<a class="btn btn-default pull-left" style="color: inherit" id="btn">my button</a>
</div>
<div>
<input id="mytxt" >
</div>
</td>
This being HTML, your best bet is to either add some CSS to increase the margin/padding on either the bottom of your first div or the top of the second one. Alternatively, you could add an empty div in between and apply your styles to that.
Just add css padding style in the head:
<head>
<title>Page Title</title>
<style>
#btn-div {
padding-bottom: 20px;
}
</style>
</head>
<body>
<td>
<div id="btn-div">
<a class="btn btn-default pull-left" style="color: inherit" id="btn">my
button</a>
</div>
<div>
<input id="mytxt" >
</div>
</td>
</body>
You can try inserting between code.
<p> </p>
Also, you can try
<br />
And my favorite, make a CSS file
<html>
<head>
<style>
.gap-10 {
width:100%;
height:10px;
}
.gap-20 {
width:100%;
height:20px;
}
.gap-30 {
width:100%;
height:30px;
}
</style>
</head>
<body>
<!-- this div will give a gap of 10px -->
<div class="gap-10"></div>
<!-- this div will give a gap of 20px -->
<div class="gap-20"></div>
<!-- this div will give a gap of 30px -->
<div class="gap-30"></div>
</body>
I hope it helps
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>
Now, this is a new project, so I need some help.
I have the following code. Please press full screen.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<head>
<title>Stack Overflow Question</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style/home.css">
<!-- Reference to main CSS Style File-->
<style>
ul {
margin:0 auto;
border-top:2px solid #000;
border-bottom: 2px solid #000;
padding:10px;
text-align: center;
font-family:"montserratlight";
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="container">
<div id = "navigation">
<p>
<ul class="col-md-12">
<!-- MAIN NENU BAR -->
<li><b>Home</b></li>
<li>Why Does This</li>
<li>Not</li>
<li>Work</li>
</ul>
<!-- Unordered lists.-->
</p>
</div>
<div class = "row">
<!-- Declaration of First Row -->
<div class="imageHolder col-md-12 hvr-underline-from-center">
<!-- Image Container as DIV -->
<div class = "imageInside" >
<img id = "imageHomeJPG" src="http://s30.postimg.org/8wav359r5/NYC.jpg" style="width:100%" />
</div>
<!-- Image Link -->
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="about.html">
<img src = "http://s30.postimg.org/mehrfflwh/Place1.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
</a>
</div>
<div class="col-md-6">
<a href="about.html">
<img src = "http://s30.postimg.org/iw5rj1l0h/Place2.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
</a>
</div>
</div>
</body>
</html>
Now, when expanded, this is what the website shows.
However, there is a small gap between both column 6 photos.
<div class="row" style="padding-right:0">
<div class="col-md-6">
IMAGE TAG
</div>
<div class="col-md-6" style="padding-left:0">
IMAGE TAG
</div>
This produced the following -
You can see that the image on the left is bigger on the right and therefore it is not correct.
My question is, how can I make the gap between the two columns smaller (to around 10px) without needing to change the padding? I want to make the images bigger in order to decrease the size of the gap, but I can't seem to find a way!
Thanks.
Make a class :
no-space {
Width: 100% !important;
Margin: 0px !important;
}
Then put this class in next to where col-md-6 is seep rated by a space like this :
Class="col-md-6 no-space"
And there should be no spaces between the photos now.
To actually solve this question too, what I can also do is go to the Bootstrap CSS file and edit the padding-left and padding-right values to equal amounts. Originally, both values are set at
padding-left:15px;
padding-right:15px;
but looking at other examples such as airBnb, their padding is both set at 12.5 so this is also another solution.
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>