In the screen shot you see a list of items on the left (not floated) and a display box on the right (floated). How can I prevent the left item's li element from cutting into the display box. The li content follows the flow and breaks to a new line before running into the display box, but the li element, as in the container, does not.
Li items on the left:
border: 1px solid #000000;
display: block;
margin-bottom: 8px;
padding: 10px;
Display box on the right:
border: 3px double #000000;
display: inline-block;
float: right;
margin-left: 20px;
padding: 15px;
width: auto;
Thanks,
Ryan
AFTER ROBERT'S SUGGESTION:
RESPONSE TO TIM B
The widths are dynamic on different pages, dynamic as in different per page, but they won't change on a per page basis, except for the li elements that go beyond the display box. Just like when you float a pictures to the left and the text sits on the right of the pictures, but once the pictures ends, the text continues underneath the image all the way to the right edge of the page, that's what I want in reverse. So I want the li element to go to the left edge of the right display box, but past the box, I want to go to the edge of the page. The text itself conforms to this, but for some reason, the li element does not recognize there to be an "object" to prevent it from stopping and cutting into the display box. The reason it doesn't recognize it is because of the right floated display box, which breaks things from the normal flow, but I would think there has to be a way to either manipulate the display box to it can be recognized or manipulate the li elements so they can recognize the display box.
If you float an element and not others then you will run into these issues. Try floating the ul element and also giving the items widths.
If you knew what the max width of the right hand column would be, you could add margin-right:00px; to either the list items or list itself.
Since the text is doing what you want, but not the LI that contains it, I am thinking LI is being rendered as a block level element (http://htmlhelp.com/reference/html40/block.html). Try setting it to display:inline-block.
Related
Okay I am a newbie regarding CSS and while during a tutorial I got completely lost.
As far as I know a block element takes up a whole line. And an inline element only takes up the width and height of the element and an inline-block works like an inline element but here you can set width and height.
Okay and now the question. In the tutorial it makes an unordered list:
header nav ul li {
display: inline-block;
padding: 0;
}
There are 5 elements in the list. Now 4 of the elements is text like "Menu", "Contact us" etc. but one element in the list should be the logo image. Now to add the logo I need to do this:
header nav ul li#logo a:link {
display: block;
width: 300px;
height: 260px;
background: url('images/logo.png') center center no-repeat;
}
But what I don't get is that I first make the elements in the list to inline-block elements (which makes sense cause I want them next to each other and one of them is an image.) But why in the world do I have to turn the element in the list that I want to contain the logo image into a block element? First of all I thought it would take up the whole line (but the elements are still next to each other) and second, I already turned the elements in the list into inline-block elements? Anybody who know the answer?
Considering the few points below you should get it why the anchor has display: block
1- The display:block is set to the anchor which is inside the li... not directly to the li itself.
Thats why its still showing all li next to each other because you changed one of the inner elements inside it to block not the li itself.
2- The default display property of anchor is inline ... this means that you don't have control on width and height.
3- To be able to show background-image inside anchor you will have to set a specific width and height and thats why the display is changed from inline to block to be able to control width and height
BTW you can also use inline-block with the anchor and it will work
hi i used bootstrap vertical navbar in my home page and now i want to make horizantal navbar in my gallery page.
but new navbar also displaying vertically. i want to make bootstrap default navbar for this page.
i used this code segmant to make vertiacl navbar in home page.
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
now i want to undo these navbar to horizantal
thnx
You should learn what these properties you are using do..
Display:block; :
Quote from W3C
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block boxes in a block formatting context collapse.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's content area may shrink due to the floats).
Float:none;:
Quote from Noah Stokes
The float property has four values that we can apply to it: left, right, inherit, and none. Each value is pretty self explanatory. For example, if you assign float: left to an element, it will move to the left-most boundary of its parent element. The same idea applies if you were to assign float: right; to an element. That element would be sent off to the right-most boundary of its parent element. The inherit value tells an element to inherit the float value of its parent element. The value none is the default value and tells an element not to float at all.
Floating means, very generally, to push a block-level element to the left or to the right, manipulating the flow in relation to other block elements.
Block means to define the type of element and the space it takes up on the page. The majority of HTML elements are either going to be block or inline elements by default. The display properties is used to manipulate these defaults. Block elements, or elements manipulated with the display properties to be block elements will take up all of the horizontal space of it's parent, or, very generally, often begin at the beginning of a line and end at the end of the line.
Change your float:none; to float:left; and display:block; to display:inline-block;
I would like to position a list beside a floating box. The Problem ist, that the bullet points of the list items are displayed outside the principal block box. So the text of the items is aligned with the normal text, but not the bullet points.
Here's the code example: http://codepen.io/Juuro/pen/oelqm
If I use list-style-position: inside; it works as expected for items which are single-lined.
Another solution would be to put the whole list in a additional box or give it display: inline-block;. But then the list items would float around the box anymore.
My requirements are:
Bullet points beside the floating box should indent like without a floating box.
In multi-line items the bullet-point should stay "outside" of the text.
The list should still float.
Is that even possible?
Is this what you want? http://codepen.io/anon/pen/ueaiy
It seems your li in the stylesheet was inside the ul.
seeing your example and if not indented to decide what you can specify dimensions of the container tightly with a picture like this DEMO
.imagebox {
float: left;
margin: 0 10px 10px 0;
height: 200px;/**add**/
width: 170px; /**add**/
}
or in this class to the IMG tag to set a fixed size
I am currently creating a navigation bar for my site, and I've looked everywhere and tried some stuff but I couldn't figure out what I've fudged up :P
Anyways, I've got some boxes I named 'nav-box' and they hold the navigation elements inside them. I have these displayed inline-block so that they look like nav elements.
2 things now, the text inside these boxes are stuck to the left of the box, I have to have them centered. Alongside this, the boxes seem really big. Do i have to set their width manually or can I have css make them fit?
Here is the JSFiddle i have created with my code. I've tried adding 'inline-block' to both the element and it's parent container, but neither of them work for this situation :(
This is what I've tried:
.nav > .nav-content > .nav-inner {
width: auto;
float: right;
text-align: center;
}
As you can see that is my parent element holding the nav-box element and I added the text-align: center;, but it still didn't do what I need.
http://jsfiddle.net/qhPwt/
The text inside the boxes are not aligned to center because there is a margin-right being applied to the content inside the boxes.
Check this FIDDLE
CSS changes
.nav > .nav-content > .nav-inner > .nav-box > .nav-link:last-child {
margin-right: 80px; // Remove this style
}
I've got a few divs (multi-column page) with "display: inline-block" set. Shouldn't this prevent them from wrapping? I want them all side by side:
div.LabelColumn
{
display: inline-block;
padding: 10px 0 0 40px;
vertical-align: top;
}
div.DataColumn
{
display: inline-block;
padding: 10px 0 0 5px;
vertical-align: top;
}
To clarify, I want the DIVs side by side – i.e., shown as columns. I want them each to take up as much room as they need. Each of them, using what I want to display, should only take up about 100px, so there is easily enough room to display a few columns side by side. The first column will have a label, the second a bit of data, the third a label, and the fourth a bit of data.
To give a higher level view of the page, I have a div which I am floating left. To its right, I want the multiple columns of data. By the way, this is working in Chrome, but not in IE.
I would like the width to automatically adjust to be as wide as the text in the DIV, if possible.
Remove inline block, use floating, assign width, and padding margin.Here is the demo
Using inline-block does not prevent elements from wrapping. In fact, when applied to div elements it will do the opposite.
use float. for more information: http://css-tricks.com/all-about-floats/
If you want them all side by side, their containing element needs to have enough width to allow so. You can prevent wrapping causing breaks within the elements by applying whitespace: nowrap;, but this may have other effects depending on how you've structured your markup.