The divs are stacking and taking up 100% width and others are being ignored entirely (namely the main wrapper which makes the entire page width="960px" is being completely ignored).
How the page looks when opened in Chrome
How the image looks like hosted at uhostfull.com
As you can see my games section (admins choice) has jumped into the advert space despite each section sitting inside a div class .container.
.container {
position: static;
float: left;
width: 100%;
display: flex;
justify-content: center;
}
Another thing that is occurring is that the main div I have used to manage the page div id #page-wrap is not doing its job:
#page-wrap {
width: 960px;
margin: 0 auto;
}
I should also mention that any divs that I create and test in chrome work (say if I make a few white boxes for example) but they will not show up when I host!
My main concern is somehow stopping the advert space automatically adopting the games section as a parent div without being nested.
Here is the code:
<!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="playpar.css">
<script type="text/javascript" src ="playpar.js" async></script>
<title>Website name
</title>
<title>
Curveball Adrenaline Challenge Bubble Trouble
</title>
</head>
<body>
<div id="page-wrap">
<div id="header">
<div id="sitelogo"><img src="http://i44.photobucket.com/albums/f50/giansonn/Logo%20bling_zpsikvjtrrl.jpg"/></a></div>
<div id="sitebold"><img src="http://i44.photobucket.com/albums/f50/giansonn/Screen%20Shot%202017-05-09%20at%2022.45.36_zpsx5p40xx4.png"/></a></div>
</div>
<div class="container">
<div id="advertspace"><img src="http://i44.photobucket.com/albums/f50/giansonn/whitetile_zpswxxr0bja.png" class="filler"><p class="getme">Advertise here</p></div>
</div>
<div class="container">
<fieldset>
<legend>Administrator's Picks</legend>
<table>
<tr>
<td>
<div class="games">
<a href="/curveballthegame"><img src="http://i44.photobucket.com/albums/f50/giansonn/Curveball%20image_zpscalom4mw.png" class="games"/>
<div class="overlay">
<div class="text"><span>Curve Ball</span></div></div></div>
</td>
<td>
<div class="games">
<a href="/adrenalinechallenge"><img src="http://i44.photobucket.com/albums/f50/giansonn/Adrenaline%20challenge%20image_zpsyinfiyue.jpg" class="games"/>
<div class="overlay">
<div class="text"><span>Adrenaline Challenge</span></div></div></div>
</td>
<td>
<div class="games">
<a href="/bubbletrouble"><img src="http://i44.photobucket.com/albums/f50/giansonn/Bubble%20trouble%20image_zpsy3mnffrg.png" class="games"/>
<div class="overlay">
<div class="text"><span>Bubble Trouble</span></div></div></div>
</td>
</tr>
</table>
</fieldset>
</div>
<div id="footnavbox">Home | Image Board | Contact us</div>
</div>
</body>
I think all these issues are related, help is appreciated.
Related
Here's what I got. I'm trying to center pandora, rocket league and chess.com in the #header div. Right now they're on the left.
<!DOCTYPE html>
<html>
<head></head>
<body>
<link type="text/css" rel="stylesheet" href="abc.css"/>
<div id="top"></div>
<div id="header">
<div class="hovimg">
<a href="https://www.chess.com">
Chess.com
<span>
<img src="https://tmp-m.org/wp-content/uploads/2015/02/chess.jpg" height="100px" width="180px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="https://www.pandora.com">
Pandora
<span>
<img src="https://c.slashgear.com/wp-content/uploads/2016/10/pandora-rebrand-980x420.png" height="100px" width="150px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="steam://rungameid/252950">
Rocket League
<span>
<img src="http://static5.gamespot.com/uploads/screen_kubrick/1551/15511094/2999833-20141023_rocketleague_01.jpg" height="120px" width="200"/>
</span>
</a>
</div>
</div>
<div id="left"></div>
</body>
</html>
I'm a little stuck trying to figure out exactly what you're after, but here's one solution that may be what you're after:
.header:after { /* Clearfix */
content: "";
display: table;
clear: both;
}
.hovimg {
width: calc(100% / 3);
float: left;
}
Note: Has not been tested, so it is possible this may not work, however at least the theory behind this idea should be of use.
I am not sure if that's what you are looking for.
<div id="header" style="text-align:center">
This will center the content of the header division.
If you want to add it to your CSS:
#header{
text-align: center;
}
If you want all content in the center then you can apply text-align: center to #header.
Try this:
.hovimg { text-align: center; }
That's the class of the block elements your a tags, spans and images (which are inline elements by default) are in - it should center them (all together - they are in one line).
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.
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'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }