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;
Related
Possible duplicate didn't help
I know there are many answers about this topic but neither of them helped me and I spent days on
this problem.
90% of the answers and books give this background trick which didn't help me.
My code - Plunker
HTML
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li>ANALYTICS</li>
<li>STYLES</li>
<li>VOTERS</li>
<li>GET STARTED</li>
<li>UPDATE</li>
</ul>
</div>
<div class="content">
<p>Content</p>
</div>
CSS
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
Right now my layout looks like this:
And I want it to look like this:
I followed this guide offered in the possible duplicate and it didn't help
I think this is because I'm using floats and fluid layout.
How can I extend the columns while keeping the fluid layout and the float positioning.
I've updated your code. Check out it on Plunker.
At first try to not use absolute or relative positions, if there is no need of them.
The second, in your case by giving display: inline and float: left styles, do the same thing, so there is enough to use only the latter one.
Besides, I've set the height of HTML and BODY tags to be 100% and did the same for sidebar and content DIVs, so they will fill the parent's (body) height.
And finally, one of your problems was the repeat-y value of background property. It didn't repeat on x axis, so you didn't see the actual size of the DIVs. I've just set it to repeat instead of repeat-y.
Try something like this:
FIDDLE
Markup:
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
CSS
*
{
margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
height: 100%;
}
h1
{
height: 50px;
line-height: 50px;
}
.container
{
margin-top: -50px;
padding-top: 50px;
box-sizing: border-box;
}
.sideBar
{
float:left;
width: 100px;
background: aqua;
}
.content
{
overflow:hidden;
background: yellow;
}
Made an image for better understanding of the problem.
Need code for .bgimage and .content div
Is this even possible for crossbrowser css (IE7+ and other major browsers) without any scripting?
It was actually a bit longer than expected, but I got your picture in real life. Don't ask again any questions here without doing more research first and writing some actual code.
Here is a demo
The code
HTML:
<body>
<div id = "header">
</div>
<div id = "bgimage">
</div>
<div id = "content">
</div>
<span class = "clear"></span>
<div id = "footer">
</div>
</body>
CSS:
*
{
margin: 0;
padding: 0;
}
body
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header
{
width: 100%;
height: 200px;
background-color: purple;
}
#bgimage
{
position: absolute;
top: 200px;
left: 0px;
right: 50%;
height: 600px;
background-color: green;
}
#content
{
position: relative;
width: 700px;
height: 600px;
float: right;
z-index: 2;
background-color: blue;
}
.clear
{
clear: both;
}
#footer
{
position: relative;
top: 600px;
width: 100%;
height: 200px;
background-color: red;
}
Note: I haven't optimized the CSS, there's some work that could be done there.
The code is also here
Explanation
Elements that I've used in the code (you might want to google them):
CSS Reset
CSS clear
absolute positioning CSS
relative positioning CSS
I'm working on a webpage, and i have the width of my div tag set and am using margin: 0 auto; but my content is still on the left. I'm using OS X 10.7.3, Chrome 19.0.1084.46, and Dreamweaver CS6
here's my CSS:
#charset "UTF-8";
body {
text-align: center;
display: block;
}
.container {
float: left;
height: 2000px;
width: 964px;
margin: 0 auto;
text-align: left;
}
.header {
float: left;
height: 117px;
width: 964px;
}
.leftcol {
float: left;
height: 1715px;
width: 534px;
margin-top: 20px;
margin-right: 10.125px;
margin-bottom: 20px;
margin-left: 30px;
}
.navbar {
float: left;
height: 69px;
width: 964px;
}
.rightcol {
float: left;
height: 1715px;
width: 306px;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 20.25px;
}
.video {
float: left;
height: 301px;
width: 534px;
}
.pagebody {
float: left;
height: 1749px;
width: 920px;
background-color: #FFF;
margin-top: 0px;
margin-bottom: 21.25px;
margin-left: 22px;
}
And the HTML that uses the CSS:
<body>
<div class="container">
<div class="header"><img src="Images/Top.png" width="964" height="117" alt="Intelligentlemen Films" /></div>
<div class="navbar"><img src="Images/RibbonMenu.png" width="964" height="69" alt="Navbar" /></div>
<div class="pagebody">
<div class="leftcol">
<div class="video"><iframe width="534" height="301" src="http://www.youtube.com/embed/kMBEuol6aUc" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="rightcol"><img src="Images/intelligentlemen button.jpg" width="300" height="61" alt="Intelligentlemen" /></div>
</div>
</div>
</body>
</html>
First of all,
You can't float left and margin auto horizontally. What's the point anyway. You want to have your container centered, not pushed to the left side.
Now that gives you trouble probably, because things don't work out as you'd want them to, because every other element you have there, is floated to the left.
Elements like your header and navbar shouldn't even be floated, they would be perfectly fine even if you didn't float them, they just need to be cleared. You need some reading to do.
Bottom line. When you're floating, you need to clear your floats after you're done with them.
Here is your reading material:
If it's the only thing you do, read at least The Great Collapse on CSS Tricks, but I'd suggest reading through it (and search for more, until it sticks)
http://css-tricks.com/all-about-floats/
http://www.alistapart.com/articles/css-floats-101/
http://www.positioniseverything.net/easyclearing.html
Floats are very important to understand.
p.s. Don't define height on your container, you want that to be flexible, don't you ? I know you're defining the height, again, because you don't understand CSS floats fully. That's why you need to do the reading :)
Good Luck :)
Because you’ve also applied float: left;.
You should also start your source with a doctype declaration, such as <!doctype html>, and ensure your HTML is valid, as well as your CSS.
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.
I was using inline-block to display a bunch of columns next to one another, but Safari was adding a white space between them no matter what. (though not Chrome even though they are both webkit). so i switched to floating the items and wrapping them in an inline-float element.
in my fiddle this seems to work in IE7-8, chrome, FF and safari.
the markup looks like:
<div id="wrapper" >
<div id="center">
<span> Foo </span>
<span> Bar </span>
</div>
</div>
and CSS:
#wrapper{
background: pink;
text-align: center;
font-size: 0; }
#center {
background: yellow;
display:inline-block;
*display: inline;
zoom: 1; }
span {
float: left;
width:100px;
background:blue;
font-size:30px;
line-height: 1;
color:white;
text-align:center; }
http://jsfiddle.net/KKzuz/10/
but on my live site IE8 rains on my parade and only displays 1 column. ie7 of all things, manages to not muck it up.
http://donutsites.com/sandbox01/portfolio/print/logos/
the CSS selectors are different, but the markup is pretty similar... as far as i can tell anyway. though the fiddle is more simplified b/c i'm not trying to run the smoothdivscroll plugin there.
<div class="scrollWrapper">
<div class="clearfix scrollableArea">
<span class="scrollblock col">
<img width="175" height="345" src="http://localhost/multi/wp-content/uploads/arb_2010_formula_back-175x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="arbor snowboard" title="" />
<img width="345" height="345" src="http://localhost/multi/wp-content/uploads/JGWI_03-345x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="JGWI_03" title="" />
</span><!--.col-->
<span class="scrollblock col">
<img width="345" height="345" src="http://localhost/multi/wp-content/uploads/BMS-POSTERS-13.5x20_1-345x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="BMS POSTERS 13.5x20_1" title="" />
<img width="345" height="345" src="http://localhost/multi/wp-content/uploads/BATTLE_LA_Wall_1-345x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="BATTLE_LA_Wall_1" title="" />
</span><!--.col-->
</div><!--.scrollableArea-->
</div><!--.scrollWrapper-->
and the CSS:
div.scrollWrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
text-align: center;
font-size: 0;
clear: both;
}
div.scrollableArea {
position: relative;
width: auto;
height: 100%;
overflow-y:hidden;
overflow-x: auto;
display: inline-block;
zoom: 1;
*display: inline;
}
.js div.scrollableArea {
overflow: hidden;
}
.makeMeScrollable {
width:100%;
position: relative;
height: 690px;
}
.makeMeScrollable .scrollableArea .scrollblock {
float: left;
vertical-align: top;
position: relative;
max-height: 100%;
}
.scrollableArea img {
height: 100%;
max-height: 100%;
width: auto!important;
max-width: none;
display: block;
}
/* digital taxonomy */
.col {
max-width: 345px;
max-height: 690px;
width: auto;
}
.col a {
display: block;
max-height: 345px;
height: 50%;
width: auto;
}
can anyone see what i'm missing?
It's the display:inline-block on div.scrollableArea. IE8 is not calculating the width correctly - it thinks it should be only one column wide.
If you are using the inline-block just to center the div, there are better cross-browser ways to do that. One way would be to give div.scrollableArea a width and use margin:0 auto;