Tagged Questions

Positioning elements to the left or right of their containers using the CSS float attribute.

learn more… | top users | synonyms (2)

2
votes
4answers
29 views

Floated element keeps full “original” width of inner narrower block element

I have a possibly simple question. I have a floated element with a block element inside. Adding text inside the block element expands the block element horizontally as well as the parent float (like ...
1
vote
5answers
54 views

Why won't these DIVs align correctly?

I've got 3 DIVs which are within a "containing" DIV. The container is 960px wide and the 3 DIVs have a width of 45%, 10%, and 45%. And they're all "floated left". Simple enough right? Well for some ...
1
vote
4answers
28 views

Fixed height elements with flexible width to fit the text contents inside

I need to make each of my floated <p> elements take a fixed height of 200px, but also have a responsive width to fit all text contents inside. Just be sure height is fixed 200px and if the ...
1
vote
3answers
32 views

Align two columns next to each other without removing them from their container?

<div class="container"> <div class="content"> </div> <div class="sidebar"> </div> </div> In the above example I can't seem to get content and sidebar ...
1
vote
3answers
37 views

3 column fluid page : BIG ISSUES

Everything looked great until I widened my site. I have checked the code, firebugged all and for 2days I have only gotten more frustrated and am praying someone here could be of help - maybe a fresh ...
0
votes
2answers
36 views

How can I make this image float right with absolute?

I have the following structure: <div class="container"> <div class="outside"> <img src="http://cox-applicators.com/images/brochures/vertical-ad-07- singles.jpg" class="imgs"> ...
0
votes
1answer
31 views

Is it possible in web page to “slide” a section on top of the other using CSS

I want to use CSS3 transition to add some effect to my web page. Basically, i want to make one specific section to slide on top of another one. For example i have the following page: And i want it ...
1
vote
3answers
47 views

Position inside float element

I've made a custom dropdown, here is the HTML: <div class='dropdown'> <div class='dropdownTitle'>Sort by<span class='select_arrow'></span></div> <ul ...
1
vote
2answers
39 views

Text overlaps when maximised or on smaller screens

I have been trying to learn CSS from the book by Jon Duckett. I'm learning the concepts of positioning and floats. When I tried to implement them, <head> <title>Try</title> ...
3
votes
3answers
44 views

clear-fix not working (chrome)

I am working on some website template for my new project but having some trouble making the sidebar fill the height of its container. I tried all clear-fixes but none of them seem to work (tested in ...
1
vote
2answers
44 views

overflow:auto breaks layout in chrome and firefox

Why is the overflow:auto; on .pageContent breaking the layout in Chrome and Firefox? It works great in Safari. How can I go about fixing it? I added it so the clear:both; on the h2 would only clear ...
0
votes
2answers
30 views

Why does the top of a float div not align with the parent div?

I'm trying to create a section of a page where two text divs align with each other, but one floats to the right of the other. Whatever I try, the floating div seems to leave about one blank line of ...
0
votes
1answer
13 views

Float right not working for naviagtion menu (Chrome) [closed]

I have a simple intranet page for our internal users which is just a top navigation bar which opens each page in an iFrame. I have a secondary navigation bar for our internal IT with a second set of ...
0
votes
2answers
45 views

Cross-browser solution to keep Floating css bullets positioned relative to a fluid Div?

I have a set of css bullets that come along with the Orbit javascript slider by Zurb Foundation. The bullets have a float:left that is necessary so that they line up horizontally when new slides are ...
0
votes
1answer
30 views

Make a child occupy 100% of its parent when the parent height is undefined

I have a parent container, <DIV>, and two child containers <p> and <a>. I have applied a float to <p> to make <a> & <p> appear on one line. I have applied ...
0
votes
2answers
70 views

How to make footer responsive through CSS?

I want to make footer responsive through CSS. I've tried it through background-size: cover but it's not working. How can i make it responsive? Here's the CSS code: #super-footer { width: 75%; ...
0
votes
0answers
30 views

How to stop Dropdown menu from going up when minimized?

When ever i minimize the browser window, the drop down menu goes up and goes left, how to correct it? Here's the css code: div#secondary-menu { bottom: -62px; position: relative; z-index: 5; ...
0
votes
2answers
55 views

2 floating containers on the same line

I've seen a lot of questions about floats here, but they can't help me with this. Pic: http://img818.imageshack.us/img818/7289/ewd.png Blue box is centered relatively page, red box is on the left ...
0
votes
1answer
23 views

How to fit the img into the div when dimentions unknown

I have a small div (e.g. 200px x 200px) and some dynamically shown images: landscape, portrait or panorama dimensions (e.g. 600px X 300px; 200px X 600px ; 2000px X 300px) I need to fit all of them in ...
0
votes
3answers
28 views

certain div styles unresponsive

jsfiddle I've got a service list with a contact button below. The service list is split into a left and right side, and the contact button should be centered below. The contact button is being styled ...
2
votes
5answers
62 views

How to float elements left or right of a horizontally centered element?

For the pagination I'd like to use a horizontal alignment of elements looking like this: |<first page> | <previous page> | page X of N | <next page> | <last page>| The ...
1
vote
2answers
45 views

CSS make image fill available width

i got 3 images next to each other, wrapped in a div which can be resized using min-width and max-width. the left and right image have a fixed width/height. the center image should fill the available ...
0
votes
1answer
28 views

how to make a left and right div fixed and center div scrollable

In my webiste i have 3 divs. <div class="main_div"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> the class ...
0
votes
2answers
85 views

Is it with CSS possible to target the first img in each line?

Is it with CSS possible to target the first img in each line. The img element has the following properties: float: left; margin-left: 20px; I would like to set margin-left to 0 on the first img in ...
0
votes
3answers
42 views

div height is not showing properly

I have a div element with two div elements in it and the inner divs are floated. But I want the main div with auto height. Not fixed. And the background must show properly. When I set the height to ...
0
votes
3answers
37 views

strange firefox float positioning, works fine in chrome/safari (CSS)

I'm having a weird issue in Firefox that I can't seem to fix. In both Chrome and Safari my float: left and float: right columns are working properly and in the right position, but when I view it in ...
1
vote
2answers
23 views

minimize rows after wrapping floated elements, but also minimize width

I have a "toolbar", which has an arbitrary number of floated inline-block elements, of unknown arbitrary widths. As the browser window gets narrower, at some point these floated elements are going to ...
2
votes
2answers
49 views

Centering div box's inside a main div

I am working on a mobile site where the page needs to change based on portrait and landscape mode. I have that part working. When the mobile device is in portrait mode it's suppose to display 4 boxes ...
0
votes
2answers
23 views

CSS 3 Column Layout change width on wrap

I have a 3 column layout specified something like this... #column1{ float:left; width:40%; min-width:265px;} #column2{ float:left; width:30%; min-width:245px;} #column3{ float:left; width:30%; ...
0
votes
1answer
24 views

Floating img and text without specifying width to container - Horizontal Scrolling / Horizontal Site / Horizontal Layout

The goal is to allow for additional content in any amount to the page; without it auto wrapping the contents (and without setting a width to the container...if possible). Prefer to not use JS for ...
0
votes
2answers
48 views

Why is my wrapper div not cleared correctly

http://jsfiddle.net/sWb7j/75/ I want to create a little chart which is scaling vertically. Why is the chart not inside the yellow main div? I thought I should clear after all 4 chart divs? This is ...
0
votes
2answers
25 views

Span Wrapping Issue

I am not sure how to force the span on the right hand side from encroaching into the span on the left hand side. My intention is to keep the value (black text) in a separate column and not allow it to ...
3
votes
6answers
62 views

Divs not floating despite correct total width

I can't wrap my head around why my 25% div is not floating next to 75%. The widths of the divs including margins sum up to a correct total width of the .content div. I must be missing some info on how ...
0
votes
2answers
32 views

Fill div with divs with auto margins (CSS)

I bet this question is asked several times before, but I can't find an answer. Not here or google. I guess that says alot of my front end- (and searching?-) skills. So apologies for an expected ...
0
votes
0answers
40 views

how to calculate line height from psd file? (leading+ font size)

I have this psd and trying to convert it to html css. But I can't calculate the line height in css from the psd. How can i calculate the line height from the leading + font size? thanks
0
votes
1answer
37 views

List items not floating left in IE10

So I've tried almost every solution posted on here for getting list items to float left in IE10. It works in IE8 and 9, but for some reason in 10 it stacks them on top of each other. I've tried ...
0
votes
1answer
45 views

move a div onto an image CSS

I have an image and a div of submit form which contain 2 button. I want to position the 2 buttons on the image, bottom right corner. But the image might be horizontal and vertical, so it have to ...
0
votes
0answers
23 views

divs floating and other users view

I have a webpage i created and i use css and div floats to position everything. On my monitor as I develop it all looks great. I show a co-worker, and all the divs overlap and look terrible. below ...
0
votes
4answers
52 views

Auto Arranging the elements using css

I have an application in which I am kind of stuck. i have created a widget which needs to be placed in such a way that it needs to auto place itself. Eg: I have something like this on a page, now ...
0
votes
0answers
36 views

Split ul in half and wrap those 2 parts around a div (logo inside dynamic menu)

I have a small problem, I am trying to wrap a dynamic menu around a centered logo. One idea come to my mind which was to split the menu (which is a ul inside a nav tag) in two parts and wrap those ...
5
votes
4answers
32 views

weird float clear issue

I have a pretty basic layout of a floated div for a left menu container column and a full width non floated div with left margin for the content area. When i place floated div's into the content area ...
2
votes
2answers
30 views

CSS Horizontal Align Float

I have a simple menu and I want to place it in the center of the page using css. Here's the menu: http://jsfiddle.net/kSV4K/4/ Here's the Codes, CSS: ul#menu { margin:0; padding:0; ...
0
votes
2answers
37 views

in CSS content div overlapping with footer

The 'page' div has three divs. 'headerdiv', 'contentall' and 'footerdiv'. The 'contentall' and 'footerdiv' are overlapping. Even if i add 'top: 100px' to 'footerdiv' it still does not help. Please ...
4
votes
5answers
63 views

(CSS) how I could make the div takes all available space in width without a specific value but there is another div in the same place with a specific

I have this issue I can't find a solution for it: I have 3 divs, two of them are located inside the third. The div which contains the others has a percentage width. The second one which is inside ...
1
vote
6answers
42 views

Vertical centering anchors inside floated list items

I've got a simple menu like this: <ul class="menu"> <li> <a href="">Home</a> </li> <li> <a href="">Products</a> ...
0
votes
0answers
7 views

Woocommerce product images not floating in IE9

http://tarynhaas.com/e-commerce/ Can anyone tell me why the images on this page don't float in IE9? They work in Chrome, Opera, Firefox, and Safari. Can't figure it out from the dev tools. Also, why ...
0
votes
3answers
44 views

Navigation menu disappearing

Update: Still a beginner question - the navigation now appears but is not inline. I have a jsFiddle at http://jsfiddle.net/4zzkV/ Beginner question. The #navigation menu that is not appearing. If I ...
0
votes
3answers
33 views

DIV layout floating issue

I am trying to get the contact form on this page to display on the left and the contact information (the address at the bottom) to display on the right. The divs are both small enough widths that it ...
1
vote
1answer
38 views

Picture 'disappear' without float-property

I'm trying to figure out css, one step at a time. Consider the following code: <header id="main"> <a href="#" id="title"></a> </header> and CSS: #main{ height: ...
0
votes
2answers
55 views

bootstrap fluid layout spans, floating issue, white space at top issue

Please help, I'm at my wits end after two hours of struggling! http://www.tumblrating.com/choose.aspx?blog=nevver The issue is I want the breadcrumbs box to go stretch the way to the "fun mode" box, ...

1 2 3 4 5 … 60