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.
Related
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<link rel="stylesheet" href="Team.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Karla|Montserrat" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/textition.js"></script>
<link rel="stylesheet" href="SparkHome.css">
<link rel="stylesheet"href="Event.css">
<script type="text/javascript">
</script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="mainWrapper">
<div class="main">
<nav class="navbar navbar-expand-lg navbar-dark" id="navbar">
<a class="navbar-brand ml-0">
<h1 style="
font-size:40px;
color: white;
" class="d-lg-none"> Logo</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav pt-2 pb-2">
<li class="nav-item mt-0" id="navItems">
Home
</li>
<li class="nav-item mt-0" id="navItemsActive">
The Team
</li>
<li class="nav-item mt-0" id="navItems">
The Event
</li>
<li class="nav-item mt-0" id="navItems">
Volunteer
</li>
<li class="nav-item mt-0" id="navItems">
Register
</li>
</ul>
</div>
</nav>
<h1 class="heading">The Event</h1>
<hr class="headingHR">
<div class="block">
<h1 class="eventTitle">
Cubing
</h1>
<p class="eventContent">
The real reason behind the creation of this organisation. We founder members are passionate cubers, in need of a platform to learn and show our skills. This thirst created our organisation.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
Surprise
</h1>
<p class="eventContent">Do you think that we'll tell you right now? Be there to witness the excitement.<br>EXPECT THE UNEXPECTED </p>
</div>
<div class="block">
<h1 class="eventTitle">
Logic Solving
</h1><p class="eventContent">
This event consists of 2 rounds. The first is a paper-based round that tests your logic and decision-making skills. The second is an actual, physical puzzle.
</div>
<br>
<div class="block">
<h1 class="eventTitle">
Horcrux Hunt
</h1>
<p class="eventContent"> In its first ever appearance at SPARK, participate in The Horcrux Hunt, scavenging for treasure items stowed away in the campus grounds.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
Fortnite
</h1>
<p class="eventContent">
With a staggering 125 million active players, Fortnite is THE hottest game on the market right now.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
MCU event
</h1>
</div>
</div>
</body>
</html>
This is how my page looks like when I add some content in the divs.
.block {
margin-top: 50px;
height:300px;
margin-left: 30px;
width: 300px;
background-color: transparent;
border:2px solid white;
padding: 10px;
display: inline-block;
text-align: center;
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-delay: 1s;
animation-fill-mode: forwards;
border-radius:20px;
margin-bottom: 50px;
}
.main {
text-align: center!important;
}
#media only screen and (max-width: 600px) {
.block {
height: 300px;
width: 300px;
margin-left:0;
margin-right: 0;
margin-top: 30px;
}
}
.eventTitle {
font-family: 'Montserrat',sans-serif;
margin-top: 20px;
color: white;
font-size: 25px;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.eventContent {
color: white;
margin-top:10px;
font-family: 'Montserrat',sans-serif;
font-size: 17px;
}
When there is no content in the .block class, the divs are arranged and spaced evenly. However, as I add content (.eventContent class), the divs (.block) go haywire. They are set as display:inline-block. How might I go about getting the divs with content to be evenly spaced and arranged?
The problem is not in the margins, it is the vertical alignment of the <div> elements.
You should add this to your styles:
.block { vertical-align: top }
Depending on exactly how you want the vertical placement to work, you might change that to vertical-align: text-top. See the CSS specs for details.
(NOTE the default is vertical-align: baseline, which aligns the bottom of the last line of text in each box to its neighbors).
The elements which have class .block have display: inline-block applied to them. The default vertical alignment for inline-blocks is baseline (i.e the last text lines in the blocks are aligned)
So just add vertical-align: top to the CSS for the .block class to force their contents to the top and align them as desired.
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
The solution has been found. The code is below. Thank you to everyone who helped.
The Solution was to clear the float, the code below fixed it for me.
.div#content:after {
content:"";
display:table;
clear:both;
}
Thanks Again.
Original Question
I have 2 Divs, one being "Content" where all the content of my site is in. And another div named "updates". I want the div "content" to resize its height so that all the divs inside of it and fit.
Here's an image explaining my problem easier Imgur Link, Not high enough rep to post image directly.
Here's my full source code (html) (along with the css of content div and updates div.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>MCSocial</title>
<script type="text/javascript" src="src/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="src/jquery.tinycircleslider.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<nav>
<ul class="nav">
<li class="left">MCFish</li>
<li>Home</li>
<li>News</li>
<li>Members</li>
<li>Media</li>
</ul>
</nav>
<a href="#"><div id="block">
<img src="img/mojang.jpg" height="200px" width="850px">
</div></a>
<a href="#"><div id="block">
<img src="img/minecraft.jpg" height="200px" width="850px">
</div></a>
<div id="updates">
<img src="img/update.png" height="48px" width="140px">
<!--post updates here-->
<h3 class="sub-title">Update 1.5</h3>
<p class="list">Added a new homepage! More simple to navigate! Enjoy!<br>Please send me some feedback here!</p>
<h3 class="sub-title">Update 1.4</h3>
<p class="list">Cleaned up code!</a></p>
<h3 class="sub-title">Update 1.3</h3>
<p class="list">Added new themes! Check them out!</a></p>
<h3 class="sub-title">Update 1.2</h3>
<p class="list">Renamed Site: from MinecraftFishing to MCFish!</a></p>
<h3 class="sub-title">Update 1.0</h3>
<p class="list">Site goes LIVE!</p>
<!--end post updates-->
</div>
<div id="twitter">
<img src="img/twitter.png" height="48px" width="140px"><br><br>
<a class="twitter-timeline" href="https://twitter.com/FluffyRabbitzZ" data-widget-id="544642022154723328">Tweets by #FluffyRabbitzZ</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="footer">
<p>©2014. MCSocial. All Rights Reserved.</p>
</div>
</div>
</div>
</body>
</html>
and the CSS;
div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: auto;
border-radius: 2px;
min-height: 100%;
position: relative;
}
div#updates {
float: left;
margin-left: 2.6%;
}
Thanks for any help.
You should clear the float.
Add overflow CSS property (for example :auto) to the div#content.
A solution for modern browsers :
.div#content:after {
content:"";
display:table;
clear:both;
}
You have to clear the floating content:
<div style="clear:both"></div>
before closing yout div.content.
I have a problem with this example: http://jsfiddle.net/JYkUS/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FSou1::Верстка макета</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="logo-wrapper">
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="Logo" width="90" height="90" />
</a>
</div>
<div class="logo-text">
<span>Happy Nanny</span>
</div>
<div class="menu">
<ul>
<li class="first">HOME</li>
<li>SERVICES</li>
<li>NEWS & PRESS</li>
<li>FIND JOB</li>
<li>CONTACTS</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="header">
<div class="header-text">
<span class="easy-way">THE EASY WAY</span>
<span class="find-the-best">TO FIND THE BEST</span>
<div class="clear"></div>
<p>babysitters, childminders, nannies or private tutors</p>
</div>
</div>
</body>
</html>
Span with text
<span class="easy-way">THE EASY WAY</span>
as default has margin-left, but i don't know why. I really don't want to set a negative value to margin-left. Is it possible to align this span to left border and why does it now have margin with such value?
P.S. Watched in Google Chrome (firefox doesn't have this margin)
EDIT:
Just if i remove this style:
.logo-wrapper .logo, .logo-wrapper .logo-text {
float: left;
}
my span goes to left border =\ but why is it so?
EDIT2: Other way, to move <div class="clear"></div> from 'logo-wrapper' container, to root-level as
<div class="logo-wrapper">
<div class="logo"></div>
<div class="logo-text"></div>
<div class="menu"></div>
<!-- FROM HERE -->
</div>
<div class="clear"></div> <!-- MOVE HERE -->
<div class="header">
<div class="header-text">
<span class="easy-way">THE EASY WAY</span>
<span class="find-the-best">TO FIND THE BEST</span>
<div class="clear"></div>
<p>babysitters, childminders, nannies or private tutors</p>
</div>
</div>
But still can't understand, why floating still work after inner clear:both div
EDIT3: Is it because float:right menu even goes "righter", than div with clear:both?
The margin is actually applied on the body tag. You can remove it using:
body {
background: none repeat scroll 0 0 #F8F7E5;
font-family: Arial;
font-size: 100%;
margin-left: 0;
margin-top: 40px;
}
Working Example: http://jsfiddle.net/JYkUS/2/
This is commonly handled using a reset.css file which removes all browser specific styling from the page, so you can start from a single base point when creating a cross browser compliant webpage. I would recommend applying such a strategy to the site.
That is because you haven't set the body margin to 0
Make it margin:40px 0 0 0
body {
margin: 40px 0 0 0;
font-size: 100%;
font-family: Arial;
background: #f8f7e5;
}
DEMO
I made this website (http://aghicks.co.uk/) using Dreamweaver and tables and I'm now learning Bootstrap. I have a few things I can't quite sort out.
So far I have this
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet.css" rel"stylesheet" type="text/css">
<style type="text/css">
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
max-width: 1000px;
border: 1px solid black;
background:#EAEAEA;
margin: auto;
padding-top: 66px;
}
.redtext {
color: #b83535;
}
a {
color: #333;
}
a:hover {
color: #b83535;
text-decoration: none;
}
.align_right {
text-align: right;
}
.logo {
min-width: 286px;
}
span {
font-weight: 300;
}
.navbar {
padding-top: 34px;
}
.centered {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
h4 {
font-size: 16px;
}
/* Homepage */
/* Footer */
.footer_wrapper {
max-height: 70px;
}
.footer {
background-color: #999999;
}
.footer_text {
color: #FFF;
font-size: 10px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3">
<img src="images/Phone_icon.png" class="pull-left">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a 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>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid">
<div class="span6">
<img src="images/Homepage/Small_one_off_jobs.png" >
</div>
<div class="span6">
<div class="row-fluid">
<div class="span12">
<h5>Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12">
<img src="images/Homepage/Map_pin.png" >
<h5 class="redtext">Northampton Based</h5>
<img src="images/Homepage/Quote.png" >
<h5 class="redtext">Free Quotes</h5>
<img src="images/Homepage/Tools.png" >
<h5 class="redtext">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" >
<h5 class="redtext">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The issues I'm having can be seen is in these pictures http://imgur.com/jdSAKEk,CbbVrv7#0
(The border around the body will be removed and the styling of the navbar will be changed)
In the first image (desktop size),you'll see that the phone numbers icon doesn't line up next to the actual numbers and both the icon and the text aren't aligned with the bottom of the logo. I can achieve this by using padding, but then when you reduce the width of the browser the padding remains and causes huge gaps in the page.
Second issue in the first image is that I cannot get those icons and red text in the middle right area to appear in a 'grid' formation like on www.aghicks.co.uk is currently.
Lastly, On the second image, when the browser width is reduced the two lists down appear in line with each other when there is clearly enough space.
Any help with any of the problems would be appreciated.
How do you want to align your huge phone icon and the 2 lines of text and numbers? First on desktop and then on tablet?
Vertical aligning is a job for display: table-something; vertical-align: bottom;.
Grid formation: I'd go with a list of 4 items, items would be fixed width (50% or 49%), displayed as inline-block (or floating into a .clearfix container).
Second image and lists not side by side: well, which CSS are applied at this width? Check rules into relevant media query. Maybe they're displayed as inline-block with a width of 50%? Then there's STILL a whitespace of approx. 4px. A width of 45% would automagically solve the problem (don't forget to add a .clearfix container otherwise content would spill into the remaining (10%-4px) left space...)