I'm trying to make a column with DIV's one after another, each DIV split into 2 columns..I've managed to do it but something tells me it's not exactly semantic...so if someone could take a look and tell me how to code it better?
http://jsfiddle.net/SynQp/1/
<body>
<div id="wrapper">
<div id="lt">
<div id="bl">
<p>column 1</p>
</div>
<div id="br">
<p>column 2</p>
</div>
<p><br> </p>
<div id="bl">
<p>column 1</p>
</div>
<div id="br">
<p>column 2</p>
</div>
</div>
<div id="rt">
<p>123</p>
</div>
</div>
</body>
#import url("reset.css");
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color:#000;
}
#wrapper {
margin: 0 auto;
width: 960px;
padding: 4px;
background-color: #999;
height: 600px;
}
#lt {
background: #33CCFF;
width: 400px;
float: left;
background-color: #333;
height: 600px;
}
#rt {
float: left;
background: #FFFFFF;
width: 560px;
}
#bl{
float:left;
width:120px;
height:120px;
background:#fff333;
}
#br{
float:left;
width:280px;
background:#e4e4e4;
height: 120px;
}
A few improvements:
instead of: <p><br> </p> use proper CSS-margins like: margin-bottom: 20px;
you have multiple IDs with the same name, IDs must be unique, use classes instead!
use semantic names: instead of br write block-right
floats can be problematic, but they don't need to be. using display: inline-block may be an alternative
Related
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
I've looked several times though all the posts I found online as well as here, but none of the methods seem to work.
The question might be a repeat of a common subject but the problem might be specific to this code...
<section class="x-graphic">
<div class="container">
<div class="col-md-2">
<img src="images/x1.png" class="x1">
</div>
<div class="col-md-1">
<img src="images/x2.png" class="x2">
</div>
<div class="col-md-2">
<div class="row x-items">
<div class="imageOne">
<img src="images/imageOne.png" title="imageOne"> text <p id="imageOne"></p>
</div>
<div class="imageTwo">
<img src="images/imageTwo.png" title="imageTwo"> text <p id="imageTwo"></p>
</div>
<div class="imageThree">
<img src="images/imageThree.png" title="imageThree"> text <p id="imageThree"></p>
</div>
<div class="imageFour">
<img src="images/imageFour.png" title="imageFour"> text <p id="imageFour"></p>
</div>
</div>
</div>
</div>
</section>
My CSS is:
body {
padding-top: 90px;
overflow-x: hidden;
}
.x1{
margin-top: 5%;
margin-left: 10%;
width: 160px;
margin-top: 20px;
}
.x2 {
width: 50px;
margin-top: 120px;
}
.x-items img {
height: auto;
width: 30px;
}
.x-graphic p {
margin-top: 130px;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: bold;
color: #000;
display: inline;
}
section p {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 16px;
margin-bottom: 40px;
}
Problems:
1) Nothing I do centers the <img> in the x-items row to the vertical center. I can center it horizontally, but not vertically.
2) I can't center the elements inside the container horizontally, and i'm only able to do this using a col-md-offset-x...
Why are my h1 tags not styled, although they are simple descendant tags? Could you tell me, what I'm misunderstanding about inheritance in this case? The code is here.
HTML
<div id="title">
<div class="left"
<h1>Lala</h1>
</div>
<div class="right"
<h2>Lulu</h2>
</div>
</div>
CSS:
body {
font-family: Arial, sans-serif;
letter-spacing: 0.025em;
}
#title {
position: absolute;
left: 64px;
white-space: nowrap;
height: 60px;
background: #000;
}
#title > .left {
float: left;
height: inherit;
width: 380px;
background: #C2D;
}
#title > .right {
float: left;
height: inherit;
width: 124px;
margin-left: 4px;
background: #5CC;
}
h1 {
color: #FF4;
}
Hey now check to this
you forget to disclose div
Replace
this
<div id="title">
<div class="left"
<h1>Lala</h1>
</div>
<div class="right"
<h2>Lulu</h2>
</div>
</div>
into this
<div id="title">
<div class="left">
<h1>Lala</h1>
</div>
<div class="right">
<h2>Lulu</h2>
</div>
</div>
">" at the end to close the div
Live demo
http://jsfiddle.net/SPN6M/2/
In line 2 your code should read
<div class="left">
Note the ">" at the end to close the div
I'm trying to build a searchbox with label filters tucked to the left of the box, my markup looks something like this:
<div id="searchbox">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<input id="input" value="search query">
</div>
I put one of my attempts in a jsfiddle:
http://jsfiddle.net/nSDV9/7/
I want the input element to use all the remaining space in the searchbox, regardless of the number of filter elements tucked to the left of it (including zero). I have tried to apply the float/overflow:hidden/etc. tricks I could find, but I haven't been able to get the effect I want.
You can do like this:
http://jsfiddle.net/nSDV9/9/
Html:
<div id="container">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<div class="searchwrap">
<input id="searchbox" value="search query">
</div>
</div>
Css:
#container{
width: 500px;
background: red;
overflow: hidden;
position: relative;
}
.searchwrap{
background:green;
overflow:hidden;
position:relative;
height:20px;
}
.filter{
float:left;
background-color: green;
color: white;
font-weight: bold;
}
#searchbox {
position: absolute;
border: 0;
background: yellow;
left: 0;
width:100%;
}
See: http://jsfiddle.net/thirtydot/nSDV9/8/
HTML:
<div id="container">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<div class="search-container"><input id="searchbox" value="search query"></div>
</div>
CSS:
#container{
width: 500px;
background: #ccc;
overflow: hidden;
position: relative;
}
.filter{
float: left;
margin-top: 4px;
margin-right: 4px;
background-color: green;
color: white;
font-weight: bold;
}
.search-container {
overflow: hidden;
padding: 4px;
}
#searchbox {
width: 100%;
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This is the cleanest I could make:
http://jsfiddle.net/nSDV9/11/
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari