I'm have two divs floated next to each other on one line. The first div should have a predefined length and be on the left side, and the second should elongate its length based on window size, div size, etc. on the right side. Basically two divs on the same line, one small, the other as long as possible to fit the text.
Here's what I have right now:
http://jsfiddle.net/nkuvW/
But as you can see the Thing2 is stuck on the other side, and no matter what I've tried, Thing2 will not elongate to thing1.
Here's the CSS I'm using:
#thing1 {
margin: 14px 14px 14px 43px;
padding: 4px;
width: 75px;
border: 1px solid black;
float: left;
}
#thing2 {
margin: 14px 14px 14px 43px;
padding: 4px;
border: 1px solid black;
float: right;
}
This appears to work pretty well:
#thing1 {
padding: 4px;
width: 75px;
border: 1px solid black;
float: left;
}
#thing2 {
margin-left: 100px;
padding: 4px;
border: 1px solid black;
}
JS Fiddle Demo
Try,
<div style='position:relative; padding-left:75px; background-color:red;'>
<div style='position:absolute; left:0px; top:0px; width:75px;background-color:green; border:1px solid black;'>Thing 1</div>
<div style='border:1px solid black;'>Thing 2</div>
</div>
Also see here: http://jsfiddle.net/S7zbh/5/
Related
I have three inline block elements inside a a container div.
The HTML looks like this:
<div class="container">
<div class="field">Text</div>
<div class="field">Text</div>
<div class="arrow"></div>
</div>
The CSS looks like this:
.container {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 3px;
background-color: white;
box-sizing: border-box;
font-size: 0;
}
.field {
font-size: 16px;
display: inline-block;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
vertical-align: middle;
}
I can't see anything wrong with this HTML/CSS, but the arrow does not appear in the middle of the container. Instead, the arrow is near the bottom of the container. Also, when I unset the vertical-align: middle property, the arrow moves farther up in the div, which is weird. If I set vertical-align: top then the arrow does go to the top of the div. Any idea why this is?
Default vertical-align is baseline. This will operate differently than true middle when paired with middle. Try setting all three to middle.
.container {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 3px;
background-color: white;
box-sizing: border-box;
font-size: 0;
}
.field {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
vertical-align: middle;
}
<div class="container">
<div class="field">Text</div>
<div class="field">Text</div>
<div class="arrow"></div>
</div>
Change .arrow from inline-block to inline
https://jsfiddle.net/aznfacLe/
I got a menu to the left and a header up there. Then I got a black box to the right that is supposed to fill all of the remaining space to the right but the problem is that the black box doesn't float next to the menu, it floats left UNDER the menu. I would appreciate if someone could help me out with this.
JS: http://jsfiddle.net/GrXLa/1/
CSS:
body {
background-color: #ececec;
font-family: calibri;
font-size: 13px;
margin: 0;
padding: 0
}
.header {
min-height: 54px;
background-color: #4d7496;
font-size: 15px;
border-radius: 0;
margin: 0;
padding-right: 20px;
border-bottom: 4px solid #2a4053;
}
.sidebar {
width: 240px;
background-color: #f9f9f9;
position: absolute;
top: 58px;
left: 0;
min-height: 100%;
z-index: 10;
border-right: 1px solid #d1d1d1;
}
.sidebar .left_menu {
width: 180px;
padding: 15px 30px;
float: left;
background-color: #f9f9f9;
border-bottom: 1px solid #ebebeb;
color: #555555;
text-decoration: none;
}
.sidebar .left_menu:hover {
width: 177px;
background-color: #fdfdfd;
border-right: 3px solid #668eb0;
cursor: pointer;
}
.header_menu {
height: 14px;
padding: 20px;
color: #ffffff;
margin-right: -1px;
border-right: 1px solid #3d5c78;
border-left: 1px solid #3d5c78;
border-bottom: 4px solid #2a4053;
float: right;
}
.header_menu:hover {
background-color: #557a9a;
cursor: pointer;
}
.content {
width: 100%;
min-height: 100%;
background-color: #000;
color: #fff;
padding: 20px;
margin: 20px 0 20px 20px;
float: left;
border: 1px solid #000;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-align: center
}
.content h2.title {
font-size: 21px;
color: #efefef;
text-align: left;
margin-top: -5px;
border-bottom: 1px solid
}
.signin h2.title {
font-size: 21px;
color: #efefef;
text-align: left;
margin-top: 10px;
border-bottom: 1px solid
}
HTML:
<body>
<div class="header">
<img src="theme/default/images/logo.png" style="padding: 10px;"/>
<div class="header_menu"><img src="theme/default/images/lock.png" style="margin-right: 10px;" /> Logout</div>
<div class="header_menu"><img src="theme/default/images/user.png" style="margin-right: 10px;" />Edit Account</div>
</div>
<div class="sidebar">
<div class="left_menu"><img src="theme/default/images/home.png" style="margin-right: 10px;" />Dashboard</div>
<div class="left_menu"><img src="theme/default/images/coin.png" style="margin-right: 10px;" />Add Funds</div>
<div class="left_menu"><img src="theme/default/images/withdraw.png" style="margin-right: 10px;" />Withdraw Funds</div>
<div class="left_menu"><img src="theme/default/images/cart.png" style="margin-right: 10px;" />Place Order</div>
<div class="left_menu"><img src="theme/default/images/order.png" style="margin-right: 10px;" />My Order</div>
<div class="left_menu"><img src="theme/default/images/star.png" style="margin-right: 10px;" />Change Membership</div>
</div>
<div class="content">
<h2 class="title">Add Funds</h2>
</div>
Your problems are, that you
position the menu absolute, which takes it out of the "normal flow"
additionally set the content div to width: 100%
float the content div
So the solution is to avoid all of the above and simply give the content element a left margin of the width of the menu (in your case 240px). That's it ...!
Here is your updated JSFiddle.
Basicly, if you want an element aside a floatting element to use all space left avalaible, it should not float, it will by defaut use all width avalaible as a block element does.
To keep aside and not wrap belo or lay under the floatting element, you need to trigger its layout.
overflow:hidden; , here in this case will do the job. .content will mind floatting element inside it and outside it. Do not give it any width or height, there is no need. eventually a min-height can be used. DEMO
.content {
overflow:hidden;
min-height: 100%;/* this works if parent has an height set */
background-color: #000;
color: #fff;
padding: 20px;
margin: 20px 0 20px 20px;
border: 1px solid #000;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-align: center
}
Inside .content, image can or should be set to max-width:100%.
Beside , the absolute positionning comes out of the flow and is therefor not seen by other element of the page. Keep side bar floatting in the flow.
DEMO
.sidebar {
width: 240px;
background-color: #f9f9f9;
/* Useless without positionning
top: 58px;
left: 0;
min-height: 100%;
z-index: 10;*/
border-right: 1px solid #d1d1d1;
float: left;/* make it float in the flow*/
}
.sidebar .left_menu {
width: 180px;
padding: 15px 30px;
background-color: #f9f9f9;
border-bottom: 1px solid #ebebeb;
color: #555555;
text-decoration: none;
}
I tried using this guy's tutorial of making a 2 column layout:
http://www.vanseodesign.com/css/2-column-layout-code/
Here's how mine came out : / http://jsfiddle.net/WrpA8/
The CSS:
#container {
width: 800px;
margin: 40px auto;
border: 1px solid black;
}
#header {
border: 1px solid black;
}
#sidebar {
float: left;
width: 200px;
padding: 4px;
border: 1px solid black;
}
#content {
float: left;
width: 600px;
padding: 4px;
border: 1px solid black;
}
#footer {
clear: both;
border: 1px solid black;
}
Border and padding contribute to an element's overall width. Try setting the border and padding to 0 and you'll see that the layout works as expected. If you want a border and padding, you'll have to factor their size in when you size the main element.
Your padding and border actually are eating up your content of 600px. So, try to make it to 580px for example and it will work.
#content {
float: left;
width: 580px;
padding:4px;
border: 1px solid black;
}
or of course you could remove padding and border altogether if you want and stay with 600px size.
Check the demo here
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.
Here is my html:
<div class="pagination">Page
«
1
2
<strong>3</strong>
4 ...
104
»
</div>
My css:
div.pagination { width: 90%; margin: 15px auto; float:right; text-align: right; }
div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination strong { border: 1px solid #0667B9; background-color:#FFFFFF; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination a:hover { border: 1px solid #0667B9; background-color:#0667B9; padding: 3px 6px; color:#B4D6F2; margin: 1px; }
And what I am getting in result:
The problem you see, things are getting overlapped, what I would like to avoid.
Thanks in advance for any help. Cheers.
It's because you used float I think.
Can you get away with using display: inline instead?
EDIT:
BTW I would have used list-items to display the paginator.
add a line-height:30px; to div.pagination
I copied your code and it looks fine but try this
div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 5px 10px; }
The padding pushes the border outside. So you might need some margin to push the links downward.
Add
display:block; width:10px; float:left;
to
div.pagination a