I'm having problems setting an image as the right hand border to #left in the example below. Currently the border appears but it is about 200px to the right, rather than 500px to the right.
Any idea what's going wrong please?
Thanks!
<html>
<STYLE type="text/css">
#wrapper, #left, #right, .sub_box
{ border: 1px solid black; }
.sub_box
{ float:left; }
#left
{ background: url("dots.gif") right repeat-y; }
</STYLE>
<div id="wrapper" style="width:882px">
<div id="left" style="width:500px;float:left">
<div class="sub_box" style="width:200px">
<p>sub box</p>
</div>
<div class="sub_box" style="width:200px">
<p>sub box</p>
</div>
<div class="sub_box" style="width:200px">
<p>sub box</p>
</div>
</div>
<div id="right" style="width:200px;float:right">
<p>Right column here</p>
</div>
</div>
</html>
Try this one...
background: url("dots.gif") 500px 0px repeat-y;
Or adjust, as you want.
Related
i coded a 6 divs beside each other
how can i make one div only to expand to take full width of wrapped div on hover and the other 5 divs get on bottom to the fully expanded div
html:
<div class="row">
<div class="col-md-2" id="discuss_block">
div1.....
</div>
<div class="col-md-2" id="discuss_block">
div2.....
</div>
<div class="col-md-2" id="discuss_block">
div3.....
</div>
<div class="col-md-2" id="discuss_block">
div4.....
</div>
<div class="col-md-2" id="discuss_block">
div5.....
</div>
<div class="col-md-2" id="discuss_block">
div6.....
</div>
</div>
css:
#discuss_block{
background: #FFBC2F;
color: #FFF;
z-index: 30;
top: 0px;
}
#discuss_block:hover{
width:100%;
}
You can use float:left http://jsfiddle.net/sfnxkav5/1/
#discuss_block{
width:50px;
float:left;
background: #FFBC2F;
color: #FFF;
z-index: 30;
top: 0px;
}
I'm having issue trying to align my div in Bootstrap 3.
Here's what I am trying to accomplish:
I have worked with pull and push but I guess I'm not good enough with it.
Code:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 blue">
blue
</div>
<div class="col-md-3 col-md-pull-9 red">
red
</div>
<div class="col-md-9 col-md-push-3 orange">
orange
</div>
<div class="col-md-3 col-md-pull-9 green">
green
</div>
<div class="col-md-3 col-md-pull-9 purple">
purple
</div>
</div>
</div>
http://jsfiddle.net/bva5z74w/1/
I was watching this to see if anyone would come answer the obvious: don't use bootstrap push and pull for this. Use float right and no floats. Blue must be taller than red at the min-width, other than that I think this will work smoothly.
DEMO: http://jsbin.com/degeju/1/
CSS:
.blue {
background: blue
}
.red {
background: red
}
.orange {
background: orange
}
.green {
background: green
}
.purple {
background: purple
}
.red,
.blue,
.green,
.orange,
.purple {
height: 50px
}
#media (min-width:992px) {
.blue {
height: 600px;
float: right;
}
.red {
height: 300px;
float: none;
}
.orange {
height: 400px;
float: right;
}
.green {
height: 200px;
float: none;
}
.purple {
height: 200px;
float: none;
}
}
HTML
<div class="container">
<div class="row">
<div class="col-md-9 blue">
blue
</div>
<div class="col-md-3 red">
red
</div>
<div class="col-md-9 orange">
orange
</div>
<div class="col-md-3 green">
green
</div>
<div class="col-md-3 purple">
purple
</div>
</div>
</div>
The HTML you have will work perfectly, just remove the pull on the purple block:
HTML:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 blue">
blue
</div>
<div class="col-md-3 col-md-pull-9 red">
red
</div>
<div class="col-md-9 col-md-push-3 orange">
orange
</div>
<div class="col-md-3 col-md-pull-9 green">
green
</div>
<div class="col-md-3 purple">
purple
</div>
</div>
</div>
http://www.bootply.com/dMNG75tSf0
Edit:
The float on the left elements is causing them to collapse to fit their contents. However, with media queries you can set the height to be the same height as the adjacent right element.
#media (max-width:1199px) {
.red {
height: 360px;
}
}
#media (min-width:1200px) {
.red {
height: 300px;
}
}
The obvious drawback is this limits the fix to browsers that support media queries. Therefore, Christina's answer is better, assuming it works consistently across browsers.
div has a display type "block", by default this means that each div will be shown below another div.
this means that someway you've changed some of the css, specifically with floats or display:inline.
if you're not sure how to find and change this you can always make sure each div has width:100%;
that will make sure the div catches the whole width of it's parent container.
I'm using bootstrap framework for a project, but I'm having trouble with a central div for my site.
I need to put a div vertically centered but with a background color for 100% full width, and inside the container div of bootstrap.
I need to build the blue part (Central DIV) of the image http://www.hmsg.net/layout.png
use this
<div class="col-lg-12" style="background: url("../img/Bg.png"); background-size: 100% auto; height:100%;">
<div class="col-lg-12" style="hieght:500px; padding:0px; margin:0px;">
</div>
<div class="col-lg-12" style="background-color:#ffffff; hieght:500px; padding:0px; margin:0px;">
</div>
</div>
Try this
<div class="col-lg-12"
style="padding:0px; background-image: url('http://www.kiteworldmag.com/media/wallpapers/2/187/3.jpg'); background-size: 100% auto; height:500px;;">
<div class="col-lg-12" style="height:300px; padding:0px; margin:0px; display: block">
</div>
<div class="col-lg-12" style="background-color:#ffffff; height:100px; padding:0px; margin:0px;">
sdfsdf
</div>
</div>
Thanks Harutyun, for your answer,
I've ended with this solution:
<div style="margin:0; padding:0px; width:100%; height:100%; display:table">
<div style="display: table-cell; vertical-align: middle;" >
<div style="background:#99FF33">
<div class="container">Content Goes Here.</div>
</div>
</div>
</div>
You can see in this JSFiddle that the search div is centre aligned, how can I make it align to the top?
HTML:
<div id="wrapper">
<div id="banner">
<a href="#"><h1>Title</h2><br />
<h2>Subtitle</h2></a>
<div id="search">
<label>Search</label>
<input type="textbox"/>
<input type="submit" />
<img src="images/logo.png" alt="logo"/>
</div>
</div>
CSS:
#wrapper{
width:85%;
margin:35px auto;
}
#banner{
height:150px;
padding:30px;
padding-bottom:5px;
}
#search{
float:right;
display:inline;
width:38%;
}
#banner h1, #banner h2{
margin:0;padding:0;color:#A2A2A2;display:inline;
}
#banner h1{
font-size:50px;
}
#banner h2{
font-size:35px;
}
You have at least two options. If you want to float the search div to right, move it up in the html code. Now the search div floats right to the elements that are after it in the code. (Note that you had an unclosed div in the original code.)
See the Fiddle
<div id="wrapper">
<div id="banner">
<div id="search">
<label>Search</label>
<input type="textbox"/>
<input type="submit" />
<img src="images/logo.png" alt="logo"/>
</div>
<a class="" href="#"><h1>Title</h2><br />
<h2 class="">Subtitle</h2></a>
</div>
</div>
Other option is to make the preceding elements (a and h2) float to the left side of the search div but that doesn't look so good as the search div is not at the right edge of the browser window.
I have the following HTML (and also at http://jsfiddle.net/pHXSJ/). In IE and Firefox, it works as expected. However, Chrome and Safari do not correctly position the footer at the bottom of the viewport.
I have tried many things suggested here already, including implementing from cssstickyfooter.net. While those techniques work, they start to fail once I try to provide the (in the example) green side bar color. Note there is no content slated for those sidebars.
<!DOCTYPE html>
<html>
<head>
<title>2012 test</title>
<style>
html,body,form {height: 100%;}
body,p{margin:0}
div#wrapper {height:100%;background-color: transparent;}
div#contentwrap {width:100%; position:relative; height:100%; top:0; padding-bottom: -4em;}
div#content {top:0;position:relative;width:20em;min-height:100%;margin-left:auto;margin-right:auto;background-color:white; border-left: 2px yellow solid;border-right:2px yellow solid;}
div#header {min-width:20em; width:100%; position:absolute; top: 0; height: 2em; background-color: silver;}
div#header2 {min-width:20em; width:100%; position:absolute; top:2em; height: 1em; background-color: aqua;}
div#footer {min-width: 20em; position: relative; clear: both; margin-top:-4em; height: 4em; background-color: red;}
</style>
</head>
<body style="background-color:green;">
<form>
<div id="wrapper">
<div id="contentwrap">
<div id="content">
<div style="padding-top: 3.5em;">
<div id="lcol" style="float:left;position:relative; width:38%">
<p>Left</p>
</div>
<div id="rcol" style="float:right; position:relative; width:60%;">
<p>Right 1 total of 35</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right 5</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right 10</p>
</div>
<div style="clear:both;position:relative;">
</div>
</div>
</div>
</div>
<div id="header">
<div>Main Header</div>
</div>
<div id="header2">
<div>Header level 2</div>
</div>
</div>
<div id="footer" style="">
<div>Footer text</div>
</div>
</form>
</body>
</html>
If i look at your css this part is missing:
div#wrapper { min-height: 100%; padding-bottom: -4em; }
This should fix your problem in Chrome.