I am trying to create multiple horizontal div elements on a page http://jsfiddle.net/bss6mc5a/
#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { display: inline; }
#body-right { float: right; content:url(http://placehold.it/240x930);}
The layout is how I would like it to be displayed however when I add text (remove the comment tag) to the the div is moving down when I would like it to stay in place.
Thank you for any assistance / correction in how I achieve this.
You need to define width for the divs:
#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { float: left; width: 960px; }
#body-right { float: right; content:url(http://placehold.it/240x930);}
Updated Fiddle:
http://jsfiddle.net/bss6mc5a/3/
Update 2:
http://jsfiddle.net/bss6mc5a/7/
Instead of trying to float your elements left or right, you can just set fixed location objects.
I updated your JSFiddle to do what I'm thinking will help.
Basically, your left and right content areas would normally have fixed width (though your images make up for that), and would be positioned absolutely to put them in the right place, then the content is just centered with:
margin-left: auto;
margin-right: auto;
width: 300px; /* some arbitary width */
But check out the Fiddle, see if that helps.
check this out I thing this what you want click Demo
Some changes in CSS
#body {
display: inline;
width: 960px;
float: left;
text-align: justify;
}
Hope this will help you...
give your body divs a display: inline-block;
http://jsfiddle.net/bss6mc5a/5/
#body-left {content:url(http://placehold.it/240x930);display: inline-block; vertical-align: top;} #body { display: inline-block; vertical-align: top; width: 30%;} #body-right {content:url(http://placehold.it/240x930); display: inline-block; vertical-align: top;}
Related
Hi im having trouble with centering the nav on this draft im making for a client.
Here is the link http://cjdrafts.info/germanserviceshop/
Please help thanks.
I'm not a professional, still learning coding and found a way to fix your issue.
What I did is commented the float left for .menu-wrapper
#Top_bar .menu_wrapper {
/* float: left;
z-index: 201;*/
}
Then defined 650px width and set the left and right margin to auto
.header-stack #Top_bar .menu_wrapper {
clear: both;
margin: 0 auto;
width: 650px;
}
Set width for menu_wrapper
#Top_bar .menu_wrapper {
z-index: 201;
width: 650px;
margin: auto;
}
remove float, set fixed width and set margin: auto.
Use display: inline-block instead of float for li
#Top_bar .menu > li {
margin: 0;
z-index: 203;
display: block;
display: inline-block;
}
and:
#Top_bar .menu_wrapper {
float: left;
z-index: 201;
width: 100%;
text-align: center;
}
set 100% width for parent and use text-align: center.
thanks for the help.
Doing the edits on a browser it does work but for some reason when i placed the css codes in the theme style sheet. Nothing work, i tried both solutions.
What seems to be the problem? I have been on this for atleast 7 days now.
I actually have a solution which is to use a menu plugin but this will be my last option.
Link to site
/*Align width 1170px*/
.align-1170{
height: 100%;
width: 1170px;
margin: 0 auto;
}
/*Align vertically*/
.align-vertically{
height: 100%;
display: table;
}
/*Header*/
header{
height: 60px;
width: 100%;
background-color: #1ccb56;
}
.logo{
display: table-cell;
vertical-align: middle;
}
.author{
float: right;
display: table-cell;
vertical-align: middle;
}
Why Can't I use float:right; to move "Author: projekcior.com" to right side
(with vertically alignment)?
Why my h3 tag is so wide? (650px)
Thanks!
An element that is floated is automatically display: block;
use
h3 { display:inline-block; }
to manage your h3 width.
Let me answer your question in steps.
Why Can't I use float:right; to move "Author: projekcior.com" to right side (with vertically alignment)?
Maybe because, you're not setting the margins to it. It actually is to the right side of the web page. I just tried to use margin for it.
p.white {
margin: 20px;
}
Using this, it came down a bit from the top corner.
Why my h3 tag is so wide? (650px)
Because you've not set any of the width: value to the element, so browser would automatically set the width. I used width property to minimize the size.
h3 {
width: 200px;
}
Here is the screen shot for your page.
Hey Komon i guess you didn't write a proper css for your webpage so i tried to correct your page see the mentioned below CSS :-
CSS
.align-vertically {
border: 1px solid;
}
.align-1170 {
height: 100%;
margin: 0 auto;
width: 1170px;
}
.logo {
float: left;
}
h3 {
border: 1px solid;
display: inline-block;
font-family: 'Lato',sans-serif;
font-size: 1.5em;
}
.author {
float: right;
}
see the css and try to understand where u made mistake actually your parent div were not floated that's why your child div are not in control....
apply this css i guess through this you will achieve your desired results...
I'm trying to place buttons on the left and the right side of a scrollable div. See this jsfiddle[1] where they are still wrapped. So I changed the display of content and btn to inline-block. See this next version of the jsfiddle[2]. That sort of worked, but the buttons are not nicely aligned. And I actually don't have any idea why. So how come and why is that?
I am confused with you saying buttons are not nicely outlined, but I guess you meant align, than you have to use vertical-align: top; as you are using display: inline-block; so your buttons are aligned to the baseline.
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
Demo
You can also float all your elements to the left as #Jarno suggested, but if you are going with float than make sure you clear your elements using clear: both; property, else you will end up with undesired positioning of your elements.
make all elements floating ~> DEMO
.content {
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
height: 40px;
display: inline-block;
float: left;
margin: 0 10px;
}
.btn {
width: 30px;
height: 40px;
display: inline-block;
float: left;
}
OR you can use vertical-align for elements to fit each other vertically
You could use float:left; on .content and .btn.
Also, don't forget to put overflow:hidden; on your .container.
Example
You need to add float positions to each .btn. float left for the left arrow and float right
Add the vertical align to the buttons:
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/y84VA/7/
I have following fiddle: http://jsfiddle.net/BFSH4/
As you see there are two issues:
The h1 and h2 aren't vertically aligned.
The nav and the content aren't horzontal alligned.
For the 1. I already tried margin and padding. No success...
The second one also isn't that easy the common ways of floating and using inline-block don't work...
What am I doing wrong?
I finally managed floating the header. The problem was that hgroup isn't a block element.
However even it worked after all I think it is better to use a real image for the enterprise name and slogan.
Now only the issue with the horizontal alignment fails.
I don't know why:
http://jsfiddle.net/BFSH4/2/
I can do what I want there is no way that they wan't to be side by side!
Solution for your first problem (found here):
HTML
<div class="header">
<span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>
CSS
.header {
height: 160px;
border: 1px solid #8a2be2;
/* text-align: center; */
}
.header span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.header img {
display: inline-block;
height: 160px;
float: left; /* added, so the image will appear left to the text correctly */
}
.header hgroup {
margin: 0;
vertical-align: middle;
display: inline-block;
}
This solution depends on display: inline-block
Solution for the second problem:
.nav {
width: 229px;
display: block;
margin: 0 auto;
}
Live demo: http://jsfiddle.net/BFSH4/4/
I have this name/value pairs:
As you've already noticed, name and state's values are both of them aligned on right side but address' value starts on new row.
How can I align the span which contains the address like the rest values (yeah, it's longer, but it should start on the same row with Address and continue on the next one)?
Style of address:
<div class="prop">
<span class="name">Address</span>
<span class="value">Women and Gynae Oncology Centre Mount Elizabeth Medical Centre Mount Elizabeth #17-14</span>
</div>
CSS for name class:
.name {
vertical-align: top;
font-weight: bold;
width: 115px;
float: left;
padding: 5px;
margin-top: 3px;
clear: left;
}
CSS for value class:
.value {
float: left;
padding: 5px;
}
Do you have any ideas?
Thanks.
UPDATE: After some refinements from the answer, it looks better:
.prop {background: #eff9fe; overflow: auto;}
.name {float: left; width: 300px;}
.value {display: block; overflow: hidden; background: #e5f2f5;}
putting the width on the .name will help your 'columns' align, overflow: hidden and no float on .value should mean that if long text in there needs to wrap it will only wrap inside itself instead of under the "key"
Updated per comments
added overflow:auto to container div as this needs to contain the floated child, float: left; width: 100%; should also work if overflow causes unnecessary scrollbars (it shouldn't in this case but you know..)
further update re alignment
.prop {overflow: auto; padding: 10px 0;}
.value {display: block; overflow: hidden; background: #e5f2f5;}
.name {
font-weight: bold;
width: 115px;
float: left;
}
Here you go:
.prop {
overflow:auto;
}
.value {
float: right;
width:350px;
}
Live demo: http://jsfiddle.net/simevidas/7L8kX/show/
It looks like you are having a wrapping issue. The span isn't the issue, its your div (or your screen) is to small to hold the span on one line, so its wrapping.
What are you settings for your prop css class?