Fluid width columns

Is there a way to have something so that I can have 3 equal width columns that fill the width of the screen regardless of the resolution/window size. Just using pseudo html for speed:

<div width=100%>
   <div width=33%>AAA</div>
   <div width=34%>BBB</div>
   <div width=33%>CCC</div>
</div>

Hi!

You can, but you’ll have to do it manually. E.g., with 3 dynamic panels that are set to their various sizes and positions based on the size of the window. Something like:

OnWindowResize
  Set width of DP1 (and of DP2 and of DP3) to [[Window.width/3]] , [[Window.height]]
  Move DP2 to [[Window.width * 0.333 ]] , 0
  Move DP3 to [[Window.width * 0.667]] , 0

You’d could then respond to the OnResize events for each panel.

1 Like

Thank for that. It nearly works. The problem, I think, is that I have a big hero image at the top. That’s created by having a 100% wide DP with an image background.

So, what I get is the 3 columns I want at 100% (total) of the width of the window, but offset to the right. The page is centered. If I align it left then it fixes my 3 column problem but everything else is left aligned instead of centered. I suspect I might be asking too much of Axure. Although having 2 or more fluid width columns should be default behaviour. If it works by adding in a load of actions then it should be possible using the UI.

You can try combining @josephxbrick 's solution with pinning the left panel to the window and then moving the middle panel to [[LeftPanel.right]] and moving the right panel to [[MiddlePanel.right]].

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.