I have a fixed width div with centered text
--------Centered Text--------
I would like to append another div that has right aligned text right before the centered div.
This is Centered Text------
EDIT:
I updated the jsfiddle code so it isn't left in such a disoriented state.
I was trying many different approaches and ended up posting a messy example. The code below shows what I am trying to do.
<div class="text-entry" style="
display:flex;
justify-content: center;
background-color:grey;
">
<div style="display:inline-block; width:100px; text-align:right; background-color:red;">My-</div>
<div style="background-color:white; ">Text</div>
<div style="display:inline-block; width:100px;"></div>
</div>
<!--- ------------------- -->
<div class="text-entry" style="background-color:grey;text-align:center;">
<div style="display:inline-block; background-color:white; ">
Text
</div>
</div>
My question is what is the proper way to implement this instead of using two inline-blocks of fixed width?
*Excuse my lack of skills. I am doing this as a hobby and not professionally. Thank you for the help. I have googled before coming here.
Related
I used 4 different ways to align nested divs side by side. I expect these 4 ways to be correct, but only one is working (float). Can somebody explain why ?
<div style="background-color:black; width:100px; height:100px;">
<span style="background-color:red;width:70%;height:100%;"></span>
<span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline"></div>
<div style="background-color:blue;width:30%;height:100%;display:inline"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;float:left"></div>
<div style="background-color:blue;width:30%;height:100%;float:left"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div>
<div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>
Or JSFiddle
Thanks in advance.
A <span> isn't a block element, so it doesn't have width and height.
The same goes for <div>'s set to display: inline.
This works as you expected.
You can remove the white space between the div's to make it work. Elements set to inline-block have a space between them just like two words would. That's why you could also set font-size: 0; and it would work.
You could do the same as #3 but with position: absolute.
this is painfull... but the first one, the span is an inline element, so is the second set the div that has the style="inline" attached to it. This means they wont accept any height or width styles, as they are not blocks!
Your first example uses SPANs, SPANs are an inline element and therefore you cannot apply a height or width to them.
Your second example, you are changing a BLOCK element (DIV) but changing it into an inline element cannot apply a height or width to them.
Floating an element removes it from the flow of the document, so different rules apply, and you can apply width and height
The last example will work if you remove the white space between the 2 nested DIVS:
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div><div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>
http://jsfiddle.net/kKScJ/76/
try this:
give on div inline style code as float:left;
it give as align div all are one side one
<div style="background-color:black; width:100px; height:100px;float:left;">
<span style="background-color:red;width:70%;height:100%;"></span>
<span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<div style="clear:both;"></div>
<div style="background-color:black; width:100px; height:100px;float:left;">
<span style="background-color:red;width:70%;height:100%;float:left;"></span>
<span style="background-color:blue;width:30%;height:100%;float:left;"></span>
</div>
I have been trying out with div overflows. And I am encountering the problem that the div is not displaying 'normally'. This is a simple HTML and CSS and I hope someone can explain me the problem?
I was expecting that the boxes to be displaying in the same line.
<div class='content'>
<div class='box'>
hihi
</div>
<div class='box'>
</div>
</div>
...
http://codepen.io/ycmjason/pen/xbXpmV/
You are missing vertical-align: top; property on box class.
It should be:
.box{
display:inline-block;
**vertical-align: top;**
width:50px;
height:50px;
margin-left:15px;
background: #55CC55;
}
The default vertical align value for a div is baseline, this means, the box moves to the bottom as soon as you write text in it. If there's no text, there is no baseline to be aligned to, so they just hop on the top. To fix it add vertical-align: top; to your .box.
I have some divs which don't behave like I wish.
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block;"><b>Productname</b></div>
<div style="float:right; width:80px;">
<div>
<button id="editBtn">Edit</button>
</div>
<div>
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
JSFiddle link
Two problems here:
the bordered divs is not high enough: the 'remove' button is not visually in the bordered div
When the 'product name' is longer, the buttons are rendered under the div with the product name. I would like the product name to be over multiple lines when this happens. The three divs should always be next to eachother.
The first and last div has a fixed width, the middle div (product name) should stretch with the size of the bordered div
Personally I'd use a table for this. Each row of the table is an item, and you have a column of images, a column of names, and a column of actions. Is this any different to the tables used for invoices?
I can't quite get the effect you want, but improvements can be made: a floated element should come before the elements that are to go around it - so in this case, it should be the first thing inside the list-product-with-border container. Also, you should either have an element with clear:both at the end of the container, or set the container to have overflow:hidden to force the floated element to be inside.
Do you want it like this?
Here's the Fiddle
<style>
.list-product-with-border {
padding:3px;
width:60%;
border:1px solid black;
overflow: hidden;
height: auto;
}
</style>
And now the HTML
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block; overflow:hidden; height: auto;"><b>Productname Is the right choice baby, as you can see its just done</b></div>
<div style="float:right; width:180px;margin-top: 10px;">
<div style="float: left;">
<button id="editBtn">Edit</button>
</div>
<div style="float: left;">
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
</div>
You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}
Cannot center div tried floating it and using text-align:center; margin:auto doesn't work please help me I can't figure this out. I will paste the code and a link for the jfiddle.
It looks fine in Jfiddle but it actually isn't I don't know why. I'm using Chrome
Fiddle
<div class="wrap">
<div class="top_portion">
<div class="logo">
<img src="img/2a685fsaq.png"/>
</div>
</div>
<div class="center">
<div class="cleft_portion">
<img src="img/5.png" />
</div>
<div class="mid_portion">
<img src="img/css.png" />
</div>
<div class="cright_portion">
</div>
</div>
<div class="bottom_portion">
</div>
</div>
I think i gave the same solution, in this question of your Can't get right portion of middle to stay on the right ...considering your markup display:table is a better option (if you can ignore IE8-)
display:table is compatible(IE8+) overall with minimal css
see demo here
HTML
<div class="center" style="display:table">
<div class="cleft_portion" style="display:table-cell">
</div>
<div class="mid_portion" style="display:table-cell">
</div>
<div class="cright_portion" style="display:table-cell">
</div>
</div>
I have removed the floats and added table display...its better if you are looking for IE8+ browsers!!
EDIT
considering your current markup, these might be faults
.center {
margin: 0 auto; /* u have mentioned only auto here */
width:1200px;
}
and add this on top of your css :
html, body {
width:100%;
height:100%;
}
working demo
make the width 100%
go to that div you want to center and write:
width:100%
or play a bit with the widths so that it centers itself
Leave text-align:center and margin:auto;
if it's still not centered you can always play with margin-right/left as long as it UNDER the margin: 0 auto;
also if you are going to do a float best have:
overflow:hidden;
and play with the height as not to have overlappings
text-align:center will not work as you are using images in your code.
if you wish to use margin:0 auto you should have to give a width to the container which you want to be in center, as the container by default takes the width of the container and margin:0 auto applied cant be seen.
I am trying to creat a layout like this:
My question is specifically centered around the five boxes. I struggle with the CSS to get it to work. Have you guys got a simple setup for such a layout?
I see that you have fixed width, so here is an example. Widths are not exact for your width, but you can esily set values you need. Main thing here is float:left in small_bottom class which makes div to be shown in one row. overflow:hidden in bottom class makes that div wrap around floating divs (without that it will be shown like there is nothing inside). If you want this depend on browser window width - try using percents in width for small_bottom.
HTML:
<div class="main">
<div class="top"></div>
<div class="bottom">
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
</div>
</div>
CSS:
div{border:solid 1px;}
.main{width:350px; border:solid 1px;}
.top{ height:40px;margin:5px;}
.small_bottom{
float:left;
height:50px;
width:50px;
margin:5px;
}
.bottom{margin:5px; overflow:hidden;}
Here is an example how it looks