New Posts  All Forums:Forum Nav:

Need some CSS help

post #1 of 9
Thread Starter 
Hey guys!
Simple quandary:
I've got a container div called "main". And I've got lots of dynamically created icons that go into main, and they're all floated left. I need main to adjust its height based on the content that is inside so that it always fully encompasses all the content. If anyone could help me out that'd be great thanks!

EDIT: Got to step out for a while, I'll be back to check on the thread and hand out the necessary rep.
post #2 of 9
Isnt it an auto thing? Ughhh I forget but I know what you mean.
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
post #3 of 9
Use the CSS attribute clear.

If this is your "list" (assuming) of dynamically generated icons...

Code:
<ul>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
</ul>
You need to insert a "clear" tag before continuing with other content.

Code:
<ul>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
</ul>
<div style="clear:both;"></div>

Edited by iPoop - 6/14/11 at 2:50pm
Primary PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II 720 (2.8 ghz) BIOSTAR A780L3L (AM3) MSI GeForce 9800GT G.Skill Ripjaws Series DDR3 1600 (8GB) 
Hard DriveOSMonitorPower
Crucial M4 64GB / Samsung F3 1TB Windows 7 Pro (64-bit) Dell SP2309W (2048x1152) PC Power & Cooling 610W 
CaseMouse
Cooler Master Elite 430 RC Logitech MX518 
  hide details  
Reply
Primary PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II 720 (2.8 ghz) BIOSTAR A780L3L (AM3) MSI GeForce 9800GT G.Skill Ripjaws Series DDR3 1600 (8GB) 
Hard DriveOSMonitorPower
Crucial M4 64GB / Samsung F3 1TB Windows 7 Pro (64-bit) Dell SP2309W (2048x1152) PC Power & Cooling 610W 
CaseMouse
Cooler Master Elite 430 RC Logitech MX518 
  hide details  
Reply
post #4 of 9
Clear will make only 1 per row, I think what he wants is one float left one float right and so on.

As far as the main div adjusting to size, just leave out size attributes.


Edit, maybe you better understand what he is trying to do.
    
CPUMotherboardGraphicsRAM
Intel i5 2500k Asus P8P67 Pro Nvidia 560 TI Corsair XMS3 @ 9/9/9/24 1600 1.5 
Hard DriveOSMonitorPower
Samsung F3 Windows 7 x64 Bit 2x 19" Samsung @ 1440x900 Corsair HX650 
Case
HAF 922 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Intel i5 2500k Asus P8P67 Pro Nvidia 560 TI Corsair XMS3 @ 9/9/9/24 1600 1.5 
Hard DriveOSMonitorPower
Samsung F3 Windows 7 x64 Bit 2x 19" Samsung @ 1440x900 Corsair HX650 
Case
HAF 922 
  hide details  
Reply
post #5 of 9
Gotta use clearfix. Check the example below
Code:
<style>
                .inner_box {
                        position: relative;
                        float: left;
                        width: 50px; 
                        height: 50px; 
                        border: dashed thin;
                        margin: 5px 5px 5px;
                        text-align: center;
                }

                .outer_box {
                        position: relative; 
                        top: 200px;
                        border: solid thin; 
                        width: 190px;
                        //height: 1%;
                }

                .outer_box:after {
                        content: '.'; 
                        display: block; 
                        clear: both; 
                        visibility: hidden; 
                        height: 0; 
                        line-height: 0;
                }
        </style>

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box">2</div>
    <div class="inner_box">3</div>
    <div class="inner_box">4</div>
    <div class="inner_box">5</div>
    <div class="inner_box">6</div>
</div>
awesome-o
(13 items)
 
  
CPUMotherboardGraphicsRAM
2500k P67A-GD65 MSI 560 Ti Twin Frozr II @ 880mhz Corsair Vengenace 8GB (2x4GB) 
Hard DriveOptical DriveOSMonitor
Samsung F3 1TB Sony Combo Drive Win 7 x64 2x Dell 24" 
KeyboardPowerCaseMouse
Leopold FC200R Antec BP550 Plus Antec Three Hundred MX518 
Mouse Pad
Walmart mousepad 
  hide details  
Reply
awesome-o
(13 items)
 
  
CPUMotherboardGraphicsRAM
2500k P67A-GD65 MSI 560 Ti Twin Frozr II @ 880mhz Corsair Vengenace 8GB (2x4GB) 
Hard DriveOptical DriveOSMonitor
Samsung F3 1TB Sony Combo Drive Win 7 x64 2x Dell 24" 
KeyboardPowerCaseMouse
Leopold FC200R Antec BP550 Plus Antec Three Hundred MX518 
Mouse Pad
Walmart mousepad 
  hide details  
Reply
post #6 of 9
Thread Starter 
Quote:
Originally Posted by iPoop View Post
Use the CSS attribute clear.

If this is your "list" (assuming) of dynamically generated icons...

Code:
<ul>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
</ul>
You need to insert a "clear" tag before continuing with other content.

Code:
<ul>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
<li style="float:left;"><a href="#"><img src="#" /></a></li>
</ul>
<div style="clear:both;"></div>
This worked, thanks! I was previously trying to stick the clear:both on the main body, but obviously that wasn't working, didn't think to add a cleared div at the end of the icons. This is why I go to OCN haha +rep to those who helped.
post #7 of 9
To avoid the extraneous markup ( Not horrible, but you should avoid if possible any extra non-semantic markup ) you can also just float the containing div - main in this case - and the container will expand with the inside floated elements.

I use the clearing divs when I am feeling lazy, but otherwise I try to do it as mentioned above
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
post #8 of 9
Quote:
Originally Posted by glakr View Post
To avoid the extraneous markup ( Not horrible, but you should avoid if possible any extra non-semantic markup ) you can also just float the containing div - main in this case - and the container will expand with the inside floated elements.

I use the clearing divs when I am feeling lazy, but otherwise I try to do it as mentioned above
How much experience do you have with that? The reason I ask is because my work used to do so with our old University-wide calendar solution, but it led to many department "skins" having broken calendars. IMO, always follow up floats with clear following them up directly.
Primary PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II 720 (2.8 ghz) BIOSTAR A780L3L (AM3) MSI GeForce 9800GT G.Skill Ripjaws Series DDR3 1600 (8GB) 
Hard DriveOSMonitorPower
Crucial M4 64GB / Samsung F3 1TB Windows 7 Pro (64-bit) Dell SP2309W (2048x1152) PC Power & Cooling 610W 
CaseMouse
Cooler Master Elite 430 RC Logitech MX518 
  hide details  
Reply
Primary PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II 720 (2.8 ghz) BIOSTAR A780L3L (AM3) MSI GeForce 9800GT G.Skill Ripjaws Series DDR3 1600 (8GB) 
Hard DriveOSMonitorPower
Crucial M4 64GB / Samsung F3 1TB Windows 7 Pro (64-bit) Dell SP2309W (2048x1152) PC Power & Cooling 610W 
CaseMouse
Cooler Master Elite 430 RC Logitech MX518 
  hide details  
Reply
post #9 of 9
Lots of experience. You can easily do any site without ever adding clearing divs. I do use them when I don't want to take the time to browser test everything and am in a hurry, so I am not condemning them but there is something to be said for a nice clean semantically correct code base. Once done it can actually make it easier to work on then throwing clearing divs all over.
Edited by glakr - 6/15/11 at 8:33pm
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding