Title: CSS Floating Div problem
Last modified: August 21, 2016
---
# CSS Floating Div problem
* Resolved [cbridges](https://wordpress.org/support/users/cbridges/)
* (@cbridges)
* [12 years, 10 months ago](https://wordpress.org/support/topic/css-floating-div-problem/)
* Hi all,
I know this is basic but it’s not working for me (I have done this in
the past with no problem) What I am trying to do is, on the front page of my
test site, float two divs. On one side I will have a picture and on the other
I will have a description. Then below this have another set of floated divs only
this time the picture will be on the opposite side as the one above it (e.g,
first row picture on left discription on right, second row description on left
and picture on right). I will have about 6 rows of these floated divs (I am trying
to not use a table). For some reason my picture and description are not staying
on the same line. Or when I get them on the same line, the border I have set
between them does not show. I don’t know if I have looked at it so long that
I am just overlooking something basic. Heres a link to my [test site](http://auburnillinois.us/testing/wordpress)
my code I am using to float divs is as follows
* ```
.pdiv {
clear:both;
}
.left_1 {
float: left;
}
.right_1 {
float: right;
border-left-width:thin!important;
border-left-style:solid !important;
border-left-color:#2d4262 !important;
padding-left: 6px !important;
margin-left: 6px;
}
.left_2 {
float: left;
border-right-width:thin!important;
border-right-style:solid !important;
border-right-color:#2d4262 !important;
padding-right: 6px !important;
margin-right: 6px;
}
.right_2 {
float: right;
padding-left: 6px;
}
```
* Thanks!
Viewing 8 replies - 1 through 8 (of 8 total)
* Thread Starter [cbridges](https://wordpress.org/support/users/cbridges/)
* (@cbridges)
* [12 years, 10 months ago](https://wordpress.org/support/topic/css-floating-div-problem/#post-3927850)
* Here is the html I am using
* ```
```
* [Andrew Nevins](https://wordpress.org/support/users/anevins/)
* (@anevins)
* WCLDN 2018 Contributor | Volunteer support
* [12 years, 10 months ago](https://wordpress.org/support/topic/css-floating-div-problem/#post-3927855)
* > On one side I will have a picture and on the other I will have a description.
> Then below this have another set of floated divs only this time the picture
> will be on the opposite side as the one above it (e.g, first row picture on
> left discription on right, second row description on left and picture on right).
> I will have about 6 rows of these floated divs (I am trying to not use a table).
* Can you illustrate this for clarity?
* Thread Starter [cbridges](https://wordpress.org/support/users/cbridges/)
* (@cbridges)
* [12 years, 10 months ago](https://wordpress.org/support/topic/css-floating-div-problem/#post-3927972)
* What I am wanting to do is to have the image and description float on the same
line, with a border between the two. I will have several “rows” like this, only
the image will be on the opposite side each time.
e.g, text with description
| Image Image | text with description Text with description | Image Image | Text
with description
* but what I am getting is:
* text with description |
Image text with description | Image
* It’s like the text is not wrapping and not allowing the to fit. Hopefully
this makes sense.
Thanks!
* [bencaplan](https://wordpress.org/support/users/bencaplan/)
* (@bencaplan)
* [12 years, 10 months ago](https://wordpress.org/support/topic/css-floating-div-problem/#post-3927976)
* Hi cbridges,
* You need to give at least .right_1 (and any other blocks like it) a width (though
I would suggest giving both a fixed width). Once you do this you should be all
set.
* [WPyogi](https://wordpress.org/support/users/wpyogi/)
* (@wpyogi)
* [12 years, 10 months ago](https://wordpress.org/support/topic/css-floating-div-problem/#post-3927977)
* Looks like you need a width (less than 50%) on the divs:
* ```
.right_1 {
width: 49%;
}
.left_1 {
float: left;
width: 49%;
}
```
* Thread Starter [cbridges](https://wordpress.org/support/users/cbridges/)
* (@cbridges)
* [12 years, 10 months ago](https://wordpress.org/support/topic/css-floating-div-problem/#post-3928028)
* bencaplan and WPyogi, adding width worked! Thank you. What do I need to put in
the css to make the image align vertically “center” in the the div? I have tried
vertical-align: middle; but that doesnt seem to work. I set the display to block
but then I don’t see the border that I have set for the other div that will be
floated in the same row. The two divs that will use an image will be assigned
these classes
* ```
}
.left_1 {
float: left;
}
.right_2 {
float: left;
}
```
* Thanks!
* [WPyogi](https://wordpress.org/support/users/wpyogi/)
* (@wpyogi)
* [12 years, 10 months ago](https://wordpress.org/support/topic/css-floating-div-problem/#post-3928030)
* > What do I need to put in the css to make the image align vertically “center”
> in the the div?
* I don’t think there’s a way to do that unless you set a fixed height for the
div and then set a top/bottom margin for the image.
* Thread Starter [cbridges](https://wordpress.org/support/users/cbridges/)
* (@cbridges)
* [12 years, 10 months ago](https://wordpress.org/support/topic/css-floating-div-problem/#post-3928031)
* Thank you WPyogi, maybe I will just resize my images to fill the entire div so
I don’t have to try to center them.
Thank you all again. I appreciate the help!
Viewing 8 replies - 1 through 8 (of 8 total)
The topic ‘CSS Floating Div problem’ is closed to new replies.
* 8 replies
* 4 participants
* Last reply from: [cbridges](https://wordpress.org/support/users/cbridges/)
* Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/css-floating-div-problem/#post-3928031)
* Status: resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics