Given this simplified snippet :
<html>
<body>
<div>
<div style='text-align:center;'>asdfaskjdfakjsd</div>
<div style='float:right'>
<input type='submit' value='asdf' />
</div>
</div>
</body>
</html>
The button floats to the right, but below the text(On the next line). I know I can realign it using relative positioning, but is there a correct way of having both on the same line.
Even better if adding the button on the right would not effect the centre align of the text. ie it does not get pushed to the left.
You can switch the order of the two divs:
<div style='float:right'>
<input type='submit' value='asdf' />
</div>
<div>asdfaskjdfakjsd</div>
As long as you don't mind them being in reverse order.
Here's a fiddle to demonstrate this effect. The fourth example shows the divs reversed.
I apologize for jumping around. I noticed that even with the reversed divs, the text didn't appear completely centered.
Here is yet another solution (5th example): http://jsfiddle.net/tracyfu/zYzqr/
#method5 {
position: relative;
}
#method5 .submit {
position: absolute;
right: 0;
top: 0;
}
The only problem with this is that if you're not careful, or your text is dynamic, it could collide with the absolutely positioned submit.
I misunderstood your question the first time. You should add float:left; on your initial div and also make sure to add clear:both; to the div below them. If you want the text to be centered, you need to have a width on the initial div.
HTML:
<div id="container">
<div id="content">
asdfaskjdfakjsd
</div>
<div id="containerButton">
<input type='submit' value='asdf' />
</div>
</div>
<div class="clear">asdfaskjdfakjsd</div>
CSS:
#container {
width:300px;
}
#content {
float:left;
text-align:center;
width:90%;
}
#containerButton {
text-align:right;
}
.clear {
clear:both;
}
Live DEMO
The standard approach is to use the "clearfix" hack. CSS:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
*zoom:1;
}
Credit Nicolas Gallagher. Then wrap your line in a cf element:
<div class="cf">
<span>Button text</span>
<div style='float:right'>
<input type='submit' value='asdf' />
</div>
</div>
Button text is changed to a span, or you could leave it as a div and float it left. cf is used to give block properties to a set of elements that do not naturally exhibit them. Without it, ensuing content will not be cleared.
DEMO
Related
<style>
.holder{
width:3in;
height:4in;
background:aqua;
}
.orangeBox{
float:left;
background:orange;
width:1in;
height:1.5in;
}
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1in;
}
</style>
<div class="holder">
<div class="orangeBox">R</div>
<div class="yellowBox">1</div>
<div class="yellowBox">2</div>
<div class="yellowBox">3</div>
<div class="yellowBox">4</div>
<div class="yellowBox">5</div>
<div class="yellowBox">6</div>
<div class="yellowBox">7</div>
<div class="yellowBox">8</div>
<div class="yellowBox">9</div>
<div class="yellowBox">10</div>
<div class="yellowBox">11</div>
</div>
What I'm trying to achieve is to have the individual boxes float left (which they're doing) but also to stay on the same line.
In the example here I want box 5 to NOT appear under box R, but rather to automatically wrap to the next full line.
I know this can be achieved via float:right, but that would reverse all the numbers, making everything backwards.
https://jsfiddle.net/o4eem3za/
You can clear every other element after the 6th element:
Updated Example
.yellowBox:nth-child(2n + 6) {
clear: left;
}
Alternatively, depending on the desired results, you could also just clear the 6th element as well:
Updated Example
.yellowBox:nth-child(6) {
clear: left;
}
Shouldn't you just make both boxes orange and yellow same height?
Right now you have orangebox 1.5in and yellowbox 1in heigh. Set 1.5 for yellowbox also and it will fix your issue.
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1.5in; /* changed this from 1in to 1.5in */
}
Fiddle: https://jsfiddle.net/Munja/o4eem3za/1/
If you are looking for a grid pattern, where you have distinct rows, I'd recommend display:table and display:table-cell. (EDIT: discard the display:table stuff, if you're floating R right - unnecessary)
<style>
.holder{
width:3in;
height:4in;
background:aqua;
}
.orangeBox{
float:right;
background:orange;
width:1in;
height:1.5in;
margin-bottom:.5in;
}
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1in;
}
</style>
<div class="holder">
<div class="orangeBox">R</div>
<div class="yellowBox">1</div>
<div class="yellowBox">2</div>
<div class="yellowBox">3</div>
<div class="yellowBox">4</div>
<div class="yellowBox">5</div>
<div class="yellowBox">6</div>
<div class="yellowBox">7</div>
<div class="yellowBox">8</div>
<div class="yellowBox">9</div>
<div class="yellowBox">10</div>
<div class="yellowBox">11</div>
</div>
EDIT: This still uses floats, but it leverages the special display attributes of table cells. Change the width of the .holder to 4 and you will see it functions as you'd expect.
EDIT v2: Changed orangeBox to float right, added .5 margin to bottom, removed display:table stuff (unnecessary if floating per poster's comment)
With display: inline-block you can achieve it
https://jsfiddle.net/o4eem3za/4/
display:inline-block
I have two selectors to play with to achieve this design:
I have tried almost everything but I just cant seem to get the text to float right next to the big letters
Here is the code:
Jsbin
html:
<div class="processlinks-section-template">
<div class="processlinks-section-item" data-letter="H">
<div class="processlinks-section-item-title">
Haftonbladet.se
</div>
<div class="processlinks-section-item-title">
Hteabagz.com
</div>
</div>
<div class="processlinks-section-item" data-letter="C">
<div class="processlinks-section-item-title">
Cftonbladet.se
</div>
<div class="processlinks-section-item-title">
Cteabagz.com
</div>
</div>
</div>
CSS:
[data-letter] {
margin:7px;
background:#ef8;
}
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
}
.processlinks-section-template
{
width: 270px;
height: 100%;
}
}
.processlinks-section-item-title
{
margin-top:5px;
}
.processlinks-section-item-title a
{
color:black;
}
.processlinks-section-item-title a:visited
{
color:black;
}
.processlinks-section-item-title a:hover
{
color:#0084c9;
}
Any kind of help is appreciated
Note: I have a javascript that appends stuff so I rather just stay with these two selectors.
If there is one item it seems to ruin the design and I think thats the problem.
Take a look: jsbin.com/UHiZUJU/9/edit
Float both the letter and link to left and add clearfix with it.
Updated jsfiddle
Add float: left to the :before psuedo-element that contains the letter, and clear: left to the section container:
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
display:inline-block;
}
.processlinks-section-item {
clear:left;
}
Updated JSBin
Currently your :before psuedo-element is display: block by default in the absence of another display declaration, which means it automatically fills 100% the width of its parent and functions like it has a line break after it (as compared to inline elements).
Floating a block element means it only fills the width it needs rather than its usual behavior of filling the full width and also removes the implicit presence of a line break. The clear: left on the container just ensures the float is reset for each section.
To make it like in your image change your margin:auto 7px;
I have a checkbox next to 3 lines of text. I wish to center the checkbox vertically against these lines of text:
A
[] B
C
I'm attempting to do this via div containers while resisting the immense temptation to revert to tables. Here's my code so far:
<div style="overflow:auto;">
<div style="height:57px; float:left;margin-right:15px;">
<input style="vertical-align:middle;height:100%" type="checkbox"
name="theCheckbox" id="checkboxId">
</div>
<div style="float:left;">
A<br/>
B<br/>
C
</div>
</div>
JSFiddle
While the above 'works', I'm not happy about the hard coded height. Changing 57px to 100% makes the checkbox disappear (computed height becomes 0). Removing the height style from the div alltogether also results in a disappearing checkbox. Can anyone suggest improvments or alternative solutions to achieve my goal?
EDIT: I have to support IE7+ amongst other browsers.
You could treat the elements as a table (without actually using a table) like this:
HTML
<div id="container">
<div class="tableCell">
<input type="checkbox" name="theCheckbox" id="checkboxId">
</div>
<div class="tableCell">A<br/>B<br/>C</div>
</div>
CSS
#container { display: table; }
.tableCell {
display: table-cell;
vertical-align: middle; }
See the fiddle here: http://jsfiddle.net/QpnkV/2/
For backwards compatibility think about using scripts in your dochead like this:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
How about this?
HTML:
<input type="checkbox" name="theCheckbox" id="checkboxId"/>
<div id ="try">
A<br/>
B<br/>
C
</div>
CSS:
#checkboxId{
position:relative;
vertical-align:middle;
}
#try{
position:relative;
display:inline-block;
vertical-align:middle;
}
Here is the JSFiddle
You can position the checkbox vertically using absolute positioning.
For your HTML, you can simplify it as follows:
<div class="wrap">
<input class="control" type="checkbox" name="theCheckbox" id="checkboxId">
<div class="label">A
<br/>B
<br/>C
<br/>D</div>
</div>
and apply the following CSS:
.wrap {
border: 1px dotted gray;
position: relative;
overflow: auto; /* triggers hasLayout in IE7 */
}
.control {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.label {
margin-left: 20px;
}
Demo Fiddle: http://jsfiddle.net/audetwebdesign/N23qr/
The tradeoff here is that you need to hard code a value for margin-left on the .label container, which is less restrictive than specifying a height value.
Note About IE7
To get position: relative to work correctly for .wrap, you need to make sure that IE7 invokes the hasLayout property, which can be effected by applying overflow: auto. For more details, see: IE7 relative/absolute positioning bug with dynamically modified page content and specifically, http://www.satzansatz.de/cssd/onhavinglayout.html#rp
Image
I tried this with the following CSS and HTML. It looks fine when the browser is of full width and scrambled when browser is resized. I WANT the elements to be where there and a HORIZONTAL SCROLL has to appear when the BROWSER is RESIZED. Pretty new to web programming. Text-align:center for positioning the center column would not work because, every time a new text is added in the left or right, it gets relocated and also center column element in ROW1(text) and ROW2(Button) do not appear along the same line. That is, text appears a bit right and the button a bit left. Text-align won't work here.
CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#000;
}
.wrapper
{
width:70%;
margin:0 auto;
padding:2px;
background-color:#fff;
}
.second_row
{
padding:2px;
margin-top:10px;
}
.center_container
{
width:30%;
margin:0 auto;
}
.left_container
{
width:33%;
float:left;
}
.right_container
{
width:33%;
float:right;
}
.topelements
{
margin-top:0px;
color:#777;
padding:2px;
}
.topelements a:link
{
color:#29a3cc;
}
.topelements a:active a:hover
{
color:#29a3cc;
}
.logo
{
overflow:hidden;
}
HTML code:
<div class="wrapper">
<span class="topelements float_left" >Mail us: admin#admin.com</span>
<span class="topelements float_right">Left links My xyz</span>
<span class="topelements center_container">Welcome to xyz ! Sign in or Signup.</span>
</div>
<div class="wrapper second_row">
<span class="left_container">Srini</span>
<span class="right_container">Vas</span>
<form class="center_container">
<input type="text" placeholder="Goooooooooooo!" />
<input type="submit" value="Search" />
</form>
</div>
<div class="wrapper">
If you want to align you object in the center, there are a couple of different ways. First of all, there is the text-align:center; which you don't need right now. There is also object-position:center; which basically does the same, but with an object. This way isn't the best, but you could add a certain percentage of padding to either side but that's not recommended. Lastly, there's alignment-adjust:central;. This may not be perfect for your situation but just try out all of these and see if they work. Good luck!
One way that would work is to set your wrapper width to a fixed value (something in 800px for example). As long as this width was longer than all the content you are putting within that wrapper, everything should work as you want. The browser will automatically place a horizontal scroll bar when the window gets smaller than the width of the wrapper.
This is just a small error I found in the CSS and I don't know if this will help too much. The div you added was not referred to as a div, but a class. For example, if you wanted to style a div in CSS, you would do this:
#divname {
CSS for div goes here...
}
On the other hand, if you wanted to add a little style to a class, you would go like this:
.classname {
CSS for class goes here...
}
If you were wondering what the difference for each is, the answer is simple. A class can define multiple objects while the divs are just limited to one object or element.
I'm currently updating a pretty old website (last update was around 2001), and have agreed to use HTML5 and CSS3.
For the general design, I'm working on a very clean white and gray tones style, with many paddings and margins. My problem resides in the home page: I'd like to have a 3-column centered layout. But where to start? I've tried some floating, but in vain.
Am I doing this right ?
HTML:
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
CSS:
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }
your css should be like this:
.ltcol, .ctcol { float:left; }
.rtcol { float:right; }
The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.
For More details you must have to read this intresting article.
See This Demo: http://jsfiddle.net/akhurshid/YRWLV/
Your HTML is very clean - this is a great step forward.
You need to add a float: left to all the columns. To ensure the float is cancelled after your columns, it is best to add a clear div after the floated columns.
HTML:
<div class="colwrapper">
<div class="ltcol">Column 1</div>
<div class="ctcol">Column 2</div>
<div class="rtcol">Column 3</div>
<div class="clear"></div>
</div>
CSS:
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef }
.ltcol { float:left; }
.ctcol { float:left; }
.rtcol { float:left; }
.clear { clear: left; }
So you add css3 tag for this questio so I suggest you to make this with css3 column layout:
More info
for example
HTML
<div class="colwrapper">
<div>text</div>
</div>
CSS
.colwrapper div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
It does not work on IE.
Use one of these tried and tested implementations instead of rolling out your own. In addition to the fact that you'll be getting tested and working code, you'll add responsiveness to your site with almost zero effort.
http://cssgrid.net/
http://960.gs/
http://framelessgrid.com/
http://goldengridsystem.com/
and lots more if you google..
could also use Flexbox property for this now as well so you don't need to worry about floats or clearfix's.
main{
/* .colwrapper{ */
display: flex;
flex-flow: row;
justify-content: center;
}
main > section{
/* .ltcol,.ctcol,.rtcol{ */
display:flex;
flex-flow:column;
align-items:center;
padding:10px; padding:.625rem;
}
main > section:nth-child(2){
/* .ctcol{ */
margin:0 20px; margin:0 1.25rem;
}
http://caniuse.com/flexbox shows the support for it isn't quite as far along as you would probably like, however, there are ways to improve support by mixing old versions of the syntax with the new http://css-tricks.com/using-flexbox/ has a great write up on it from Chris Coyier if you want to play with this for a next project (this post is fairly old). You can also get more details at http://html5please.com/#flexbox
Also, if you're using HTML5 I'd probably go with sections over divs for a more semantic structure, so a comparison would look something like this:
<main>
<section></section><!-- or <nav></nav> -->
<section></section><!-- or <article></article> -->
<section></section><!-- or <aside></aside> -->
</main>
instead of...
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
Just try putting the rtcol div beofre le ltcol div.
<div class="colwrapper">
<div class="rtcol">X</div>
<div class="ltcol">X</div>
<div class="ctcol">X</div>
</div>
http://jsfiddle.net/EDjpy/