I have a odd problem while working on a small site.
I can't get my wrapper to wrap around all of my other divs correctly. My code looks like this:
<body>
<div id="wrapper">
<div id="header">
<div id="menu">
</div>
</div>
<div id="content">
<div id="text">
<form></form>
</div>
<div id="contact"><img />
<map name="Map" id="Map">
</map>
</div>
</div>
<div class="clear"></div>
</div>
</body>
And the CSS:
body {
margin: 0px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
}
#wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 0px;
}
#header {
height: 560px;
width: 1190px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/Header.jpg);
background-repeat: no-repeat;
}
#menu {
width: 640px;
position: relative;
left: 350px;
top: 115px;
}
#content {
width: 1190px;
margin-left: auto;
margin-right: auto;
position: relative;
top: 10px;
}
#text {
width: 550px;
float: left;
margin-bottom: 20px;
position: relative;
left: 180px;
}
#contact {
float: left;
margin-bottom: 20px;
position: relative;
left: 230px;
top: 50px;
}
.clear {
clear: both;
}
The wrapper seem to wrap on some of my pages but not all, and if I specify the size of the image in #contact it will fail on the other pages aswell. However, it does wrap the #text div.
Am greatly pleased for any help!
Best Regards
Robert
The position: relative; style attached to the contact div is messing up the wrapper near the bottom. If you remove that style and then switch out the offsets to be margins instead, the wrapper div now wraps correctly across all the content divs. I have set up an example with your code here:
http://jsbin.com/eqecev/2/edit#preview
Add overflow:auto; to your wrapper div's CSS.
Related
We try to center a CSS circle with a image and a label overlaying the circle. The circle should be horizontally centered in a bootstrap column. Goal is to have this circle always in the horizontal center. Any advise is welcome.
Please see following JSFIDDLE
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="circle1Wrapper">
<div class="circle-textSmall bubble1outer">
<div> <span class="bubbleIconSmall">
<img src="http://lorempixel.com/40/40/" />
</span><span class="bubbleHeadSmall">label</span>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
CSS:
.circle1Wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 9999;
margin: auto;
border: 1px solid;
}
.bubble1outer {
position: absolute;
}
.circle-textSmall div {
width: 125px;
}
.circle-textSmall div {
float: left;
width: 250px;
padding-top: 15%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #000;
}
span.bubbleIconSmall > img {
width: 45%;
height: auto;
}
.circle-textSmall:after {
width: 125px;
padding-bottom: 125px;
margin-left: 50%;
}
.circle-textSmall:after {
content:"";
display: block;
width: 250px;
height: 0;
padding-bottom: 250px;
background: #ccc;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
It should look like this:
#metaxos, I wanted to put this as a comment, but it is a bit long.
Even when you found a solution that works for you, I think that you may want to consider cleaning that code a bit; look how the original example got rid of most of the code and just kept one div:
.innerwrapper is unnecessary (why not put that style directly on #myCircleDiv?);
Same thing for the div that holds the image (you could put that style directly on the image!);
And the img itself can go too (and use it as background of #myCircleDiv).
This is my opinion (feel free to ignore it), but I think you should aim for something cleaner and easier to maintain, rather than a more complex and elaborated (but unnecessary) structure (unless it is required by the user/customer). The simpler, the better.
In that sense, this (you can see it working on this jsfiddle):
<!-- HTML -->
<div id="myCircleDiv">LABEL</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
line-height:375px;
text-align:center;
color:white;
background:url("http://lorempixel.com/50/50/") #ccc no-repeat 50% 38px;
}
Looks beter than this:
<!-- HTML -->
<div id="myCircleDiv">
<div class="innerWrapper">
<div>
<img src="http://lorempixel.com/50/50/" />
</div>
<div>LABEL</div>
</div>
</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
background-color:#ccc;
background-size:250px 250px;
line-height:250px;
text-align:center;
color:white;
}
.innerWrapper {
width: 100%;
height: 250px;
}
.innerWrapper div {
float: left;
height: 125px;
width: 100%;
line-height: 125px;
}
.innerWrapper div img {
margin-top: 38px;
}
And the result is exaclty the same. But again... that's my opinion :)
I'm having a rough time trying to position things in CSS. I understand padding,margin,height,width which to me seems like it should be enough to organize nested div boxes, but unfortunately it doesn't seem to be that easy for me.
Anyway, in my example below, the profile picture is bigger than the actual div it's contained in.
What am I doing wrong here?
CSS
.mailcontainer{
top: 40px;
width:600px;
height: 100%;
width: auto;
position: relative;
background-color:green;
}
.mail {
margin: 5px auto;
width: 700px;
height: 40px;
z-index: 100px;
overflow: hidden;
background-color: #d3d3d3;
position: relative;
border-radius: 6px;
}
.leftprofileimage img {
float: left;
max-height: 100%;
width: auto;
position: absolute;
border-radius: 90px;
}
.snippet {
float: right;
top: 10px;
width: 55%;
margin-left:26%;
position: absolute;
}
.sendername {
font-size: 1.0em;
width: 26%;
padding: 9px 0;
margin-left: 15%;
position: absolute;
}
HTML
<div class="mailcontainer">
<div class="mail">
<div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
<div class="sendername"><a href="/">Jeff
</a></div>
<div class="snippet">
Hello this is a test message</div>
<div class="delete"><p>DELETE</p></div>
</div>
<div class="mail">
<div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
<div class="sendername"><a href="/">Jeff
</a></div>
<div class="snippet">
Hello this is a test message</div>
<div class="delete"><p>DELETE</p></div>
</div>
http://codepen.io/pen/
Your profile picture is 40x40, and the nearest positioned parent is .mail, which is also 40px. The profile pics immediate parent (.leftprofileimage) was not explicitly positioned, so that's probably where the confusion lays. This codepen simply adds rules to .leftprofileimage to make it the element that profile pic conforms to:
http://codepen.io/sean9999/pen/xypBb
I'm having many issues regarding the positioning of div boxes in HTML and CSS. I have got a wrapper and 2 boxes. I want one box on the left and the other on the right, however the box on the right appears under the others. Why is this? I don't want to use "top" as it messes with a few other things. What do I do?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div id="newsbar"></div>
</div>
</body>
</html>
#wrapper
{
position: relative;
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
}
FIXED:
#wrapper
{
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
float: left;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
float: right;
height: 100%;
width: 15%;
background-color: #A13927;
}
The default display for a div is: "display: block".
Blocks don't obey "width" style and span as 100%. The following elements are put below the block-displayed div.
Try adding the style to your divs as "display: inline-block" (i.e. to those divs you want to see consecutive).
EDIT: did not fully understand the question fully. BESIDES doing what i told, you can put "float: left" and "float: right" to those divs if you want them to stick to the left and right respectively.
add Float:left and float:right:
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
float:left;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
float:right;
}
The answer to your question is because the elements are position relative to each other.
You have multiple "solutions":
1) float your elements. See JSFiddle
E.g.
#newsbar
{
float: right;
width: 15%;
background-color: #A13927;
}
2) Change your positioning to be fixed, but likely you want absolute. See JSFiddle
E.g.
#newsbar
{
position: absolute;
right:0;
width: 15%;
background-color: #A13927;
}
3) Other options as well (display: table-cell, et cetera)
You have a ton of solutions for this one. Here are three ways of doing it, each method will produce slightly different results. jsFiddle
HTML:
<div class="method-1">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-2">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-3">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS:
div div {
height: 10em;
width: 15%;
border: 1px solid red;
}
div.method-1 div {
display: inline-block;
}
div.method-2 {
height: 10em;
}
div.method-2 div {
position: absolute;
display: block;
}
div.method-2 div.right {
left: 15%;
margin-left: 1em;
}
div.method-3 {
display: table;
width: 30%;
}
div.method-3 div {
display: table-cell;
}
I'm having some trouble figuring out how to do this. I want to have a wrapper so my site is centered, but one of the header elements needs to stretch all the way to the right edge of the page, but without expanding the width of the page and adding scrollbars.
See here: http://i49.tinypic.com/6rkaxc.jpg (new poster so can't add image)
The blue outline represents the centered wrapper, and the orange box is the header div that I'm trying to get to fit to the right side of the page. I've got it to work using 100% width but it creates a horizontal page scroll since it's making it the same width as it's parent. I want it to expand for users that have higher resolutions so it always fits snug to the right side. I hope this makes sense.
my code looks something like...
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
CSS:
div#wrapper {
margin: 0 auto;
width: 1020px;
position: relative;
}
div#header {
height: 150px;
position: absolute;
left: 510px;
width: 100%;
}
div#left {
width: 510px;
float: left;
}
div#right {
width: 100%;
float: left;
}
I'm pretty new to this stuff so if you notice any errors here or bad practices please point them out! Thanks for the help! :)
Since you want your content to be fixed width, a strategy would be to have containers for both left and right contents. This allows you to use width: 100% for the header which will extend to the end without scroll bars. You then make the header relative to the right container. Here is a jsfiddle you can play with.
Note I made the widths smaller so it would fit in my jsfiddle window.
HTML:
<body>
<div id="wrapper">
<div id="leftContainer">
<div id="left">
This is left
</div>
</div>
<div id="rightContainer">
<div id="header">
This is a header
</div>
<div id="right">
This is right
</div>
</div>
</div>
</body>
CSS:
div#wrapper {
text-align: center;
width: 100%;
position: relative;
white-space: nowrap;
overflow-x: scroll;
}
div#header {
z-index: 1000;
height: 150px;
position: absolute;
left: 0;
width: 100%;
background: green;
}
div#leftContainer {
float: left;
width: 50%;
height: 500px;
display: inline-block;
}
div#left {
float: right;
width: 260px;
height: 300px;
background-color: purple;
}
div#rightContainer {
position: relative;
float: right;
width: 50%;
height: 500px;
display: inline-block;
}
div#right {
width: 260px;
height: 300px;
background-color: yellow;
}
Try this one. I changed the wrapper width to 80%. Not sure if that's ok. But I works well when expanding the page. Moved the header outside of wrapper and also added background color for clarity.
Note 1: right DIV's margin-top is same size as header DIV's height.
HTML
<div id="outerWrapper">
<div id="header">
Header
</div>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</div>
</div>
CSS
div#wrapper {
margin: 0 auto;
width: 80%;
height: 100%;
position: relative;
background-color: #CCCCCC;
}
div#header {
height: 150px;
float: right;
position: absolute;
left: 50%;
width: 50%;
background-color: yellow;
}
div#left {
width: 50%;
height: 100%;
float: left;
background-color: red;
}
div#right {
width: 50%;
height: 100%;
float: left;
margin-top: 150px;
background-color: blue;
}
Hope this helps.
From everything I've read, my CSS should have the left hand text resize to fit the remaining space, but it doesn't seem to work in Chrome (ironically IE9 renders something right for once).
Bit of a noob with CSS so there's undoubtedly something I'm missing (and stuff that I don't need).
The website can be seen here;
baradineholdings.com.au
HTML;
<div id="internal">
<div id="image">
<img src="" alt="" width="563" height="422"/>
</div> <!-- end #image -->
<div id="content">
<p> A whole heap of content goes here. </p>
</div> <!-- end #content -->
</div> <!-- end #internal -->
CSS;
#internal {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#image {
width: 563px;
height: auto;
float: right;
right: 0px;
top: 0px;
margin: 0;
}
#content {
display: block;
height: auto;
background-color: #f1f1f1;
float: left;
margin-right: auto;
position: relative;
}
The issue appears to be with the
float: left;
in #content. If you remove this you get the desired effect in all browsers. You'll also need to set the display on #content to be:
display: inline;
Otherwise your backround-color will cause issues.
Hope this helps.
#content {
clear: both;
display: block;
height: auto;
background-color: #f1f1f1;
float: left;
margin-right: auto;
position: relative;
}
Try to add
clear: both;